Warning: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472

Warning: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472
WordPress前端自制拖放区域上传文件的轮子 - 微码盒
!
也想出现在这里? 联系我们
广告位

WordPress前端自制拖放区域上传文件的轮子

上个月写过一篇 WordPress 通过 Rest API 自定义附件上传接口,那篇文章主要介绍了如何打通前后端,利用 Rest API 保存“抓取”已知 URL 的文件。不过在更多的情况下,我们还是需要通过自己z } C : X =的表单上传文件。正好这个月有个项目,有个表单需要拖放文件到指定区域里V @ j 7,提交表单的时候上传文件。如果我用 Gravity Forms 给的文件上传域,它只有原生的点击选取本地的文件组件,并没有拖放选取文件的组件,所以这里就需要造一v F | p w个轮子了。先说结果,最后实现出来是这样子的:

文件6 M r t ) j $拖到} ` ^ : i ( G区域上方,区域会变色;拖入后区域内显示文件名,判断文件格式和尺寸是否合规;点击清除,会重置区域。

HTML 结构

这里面#pro_document 这个就是真实的用来上传的输入项,把它隐藏,通过 JS 使.js-drag 整个区域可以接受拖放文件进来

  1. <div class="dm v Q c @ /ragarea js-drag">
  2. <p>DRAG A FILE HERE,<br/>OR</pY w U L U q ,>
  3. <span class="j( I v { p ? v Ps-drag-fileiU n R i + Anfou 1 F ,"></span>
  4. <a href="###" class="button"&gf | 3 x d Rt;Choose a File</a>
  5. <# . l Z Xa href="###"9 c 7 | X ? L class="js-drag-cleaa \ w 0 Kr">x Clear) F s ^ y @ 1</a>
  6. <input type="f\ O t % ? 5 Dile" value="" name="pro_document" id="pro_document" placeholdeJ , U = @ 9 Ur2 $ & k="" class="js-drag-file" />
  7. </div>

JS 部分

  1. $(function(){
  2. //允许的格式
  3. var fileTypeArray = ['JPG','PNG','CAD','RAR','ZIP'];
  4. function FileListT o {Items (files) {
  5. var b = new Clis K / n ) 4 l ppboardEvent("").clipboardData || new DataTransfer()
  6. for (var i = 0, len = files.leG | F f sngth; i<len; i++) b.items.add(files[i])
  7. return b.fB c } b I g ) A 7iles
  8. }
  9. function FileVerify(file){
  10. if(filg * z W X 4e.size > 2*1024*1024){
  11. alert("文件不能大于2M");
  12. return fR 0 q Y 5alse;
  13. }else if&w Q b 5 V o#40;file.siz7 * : $e <= 0){
  14. alert("文件大小不能小于0");
  15. return false;
  16. }elsJ M G N % 9e{
  17. var ab z Rrr = file.name.split('.');
  18. var suffix = arr[arr.le| $ N F u ! W ] %ngth-1].toUpperCase();
  19. if(fileTypeArray.includes(suffix)){
  20. rc l Y e . { ~ Peturn true;
  21. }else {
  22. alertA v Q40;"暂时不支持" + suffix + "格式文件");
  23. return false;
  24. }
  25. }
  26. }
  27. var drs p g R ) qagElement =^ k l y + n $('.js-drag');
  28. //拖入结束
  29. $('.js-drag').on("drop", function(event){
  30. event.prevenL } _ / ; { e -tDefault();
  31. event.stopPropagation();
  32. v? 7 % # n N [ $ar fileFieldDOM =; $ : , O O a P 5 $(this).find('.js-drag-file')[0];
  33. var fileFieldDisplay = $(this).find('.js-drag-fileinfo');
  34. console.log(event);
  35. event.dataTransfer = event.originalEvent.datj ( } Y K JaTransfer;
  36. var firstFile = eve? O P n x S # : xnt.data- a NTransfer.files[0];
  37. v; ? 0 [ bar firstFileArr = [ firstFile Q f ;93;;
  38. var newfileList = new FileListIte# m q L ` g p d 4msS ) [ f z(firstFileArrb A /);
  39. if( FileVerify(f# p r virstFile)){
  40. console.log("file verified:) X q ? ` 8 l "+ firstFile.name);
  41. console.logm e U ) W L0;firstFile);
  42. /+ x & ! 2 7 P j ?/.filled样式追加后,区域变成已添加文件的状态
  43. $(. k y # D ethis).addClass9 = o E 5 ?(&w ~ p | % [ Cquot;filler y K # { ] ]d")
  44. fileFieldDiO . Y tsplay.html("selecteN d *d file:</br>" + firstR % k S ! - 1 fFile.name);
  45. fileFieldDOM.files= newfileList;
  46. }
  47. $(this).removeClass("dragenter");
  48. });
  49. //点击开启选择文件窗口
  50. $('.js-dJ ; d W Y p r &rag')l 8 T;.onK 5 P B -("click&qu* [ b \ Mot;, function(event){
  51. var fileFieldDOM = $(this).] p 0 L H 1 l i #find('.js-drag-filec _ G & [ 7 C')[0];
  52. var fileFieldDisplay = $(this/ X c 0 F q 5 f41;.find('.js-drag-fc ` ] A s mileinfo');
  53. fileFieldDOM.click();
  54. })E 5 $ E p;;
  55. //拖入
  56. $('.js-drag').on("dragenter&quot` W w i C;, function(event= u * = % ;){
  57. event.preventDefault();
  58. event.stopPropagation();
  59. //console.log('drageY B ; A \ P Q lnter');
  60. //增加样式.dragenter,其实就是一个背景色,以提示用户有文件正i : X 4 1 i 8 ; b在拖进来
  61. $(this).addClass("dragenter&q| ! - ) ^uot;);
  62. })t % $ L;;
  63. //文件正g c ^ n d @ r t在区域上方
  64. $('.js-drag').on("dragover", function([ ` t \ D Eevent){
  65. event.preventDefault(&A + S f - ]#41;;
  66. event.stopPropagation()L t w R;;
  67. });
  68. //拖离
  69. $('.js-dq } J { f 9 krag').on("dragleave", functionO S h H0;event){
  70. //console.log('dragl~ k x L k c F reave');
  71. $(this).removeClass("dragenter");
  72. });
  73. //所选的文件改变
  74. $('.js-dh / X 3 W -rag-file').on("? o @ +change",function(event){
  75. var firstFilei J | / i = $9 o C h i ^ l Q S(thf w U 5 His)[0].files[0];
  76. if( FileVeri| n y ~ a 0fy(firstFile)){
  77. consod C V C F d 1 / /le.log~ a m +40;"file verified: "+ firstFile.name);
  78. console.log(firstFile);
  79. $(this).parentF ) K P().addClass("filled"t S Q1;;
  80. $(this).siblings('.js-drag-fileinfo').html("selecz E . d Xted file:</br>" + firstFile.nameS F d v o * N }41;;
  81. }e& N - b : LlM { S w V z Q V hse4 C z G : @ / y* Y N O23;
  82. $(this)[0].files=new FileListIteF e Z k 0 ^ms("");
  83. }
  84. });U . q & e I
  85. //清空选定的文G $ - E J * G c
  86. $('.js-drag& k 4-clear'S _ e41;.on("click",function(eventZ W $ b j 8){
  87. event.prK * ^ S hevL T N S u 3 B {e^ 5 ~ lntDefault();
  88. event.stopPropagation();
  89. $(this).siblings('.js-drag-file'v o R41;[0].fi{ ? C n v / [les=new FK $ U t C , KileListItems(""V 2 n f Y _1;;
  90. $(this)e j 6 c - E E S =;.siblings('.js-drag-fileinfo'C [ @ Z i Z 841;.html(&u ) , \ u z . zquot;");
  91. $(this).parent().removeClass("filled");
  92. });
  93. });

CSS 样式

  1. .form-regular .dragarea{
  2. box-sizing: border-box;
  3. width: 100%;
  4. height: 150px;
  5. background:#f7f7f7;
  6. border-radius: 6px;
  7. border:2pxy q z M : 3 m dashed #d3d3d3;
  8. display: flex;
  9. flex-direction: column;
  10. flex-wrap: nowrap;
  11. justify-content:center;
  12. fo, ; J v I u e @ znt-size: 13px;
  13. text-align: center;
  14. }
  15. .form-reg$ j : q c ! 1 3ular .dragarea.dragenter{L S I;
  16. background:#dedede;
  17. }
  18. .foT / A n : Arm-regu0 K -lar .drN q _ { / ~ 0agarea p{
  19. font-size: 13px;
  20. margin:0 auto 6px auto;
  21. line-height: 1.3;
  22. }
  23. .form-regular .dragarea .button{
  24. margX S Iin:0 auto;
  25. }
  26. .js-drag-file{
  27. overflow: hidden;
  28. width: 1F ; 8px;
  29. height: 1px;
  30. opacity: 0;j = E ;
  31. }
  32. .js-drag .js-drag-fileinfo,
  33. .js-drag .js-drag-Z n 2 C 3 Kclear{
  34. display: none;
  35. color: #000;
  36. font-weight: 400;
  37. font-size: 15px;
  38. line-height: 1.5;
  39. }
  40. .js-drag .js-drag-clear{
  41. text-transform: uppercase;
  42. font-size: 13px;
  43. width: 80px;
  44. margin: 10px auto 0 auto;
  45. ; c \ K125;
  46. .j4 2 ] M / . z ^ *s-drag .js-drag-fileinfo:first-line{
  47. color: #b2b2b2;
  48. }
  49. .js-drag.filled .js-drag-fileinfo,
  50. .js-drag.filled .js-drag-clear{
  51. display: block;
  52. x * Y t 1 b 8 K X5;
  53. .jl f d a y D 1s-e R 5 ; & l 1 Fdrag.filled p,
  54. .w ` D d 4 C u C 7js-drag.filled .button{
  55. d~ 1 R , A J \ q Yisplay: none;
  56. }

表单处理

还是通过 Rest API 保存文件,保存后获取到文件地址以做后续其他工作。注意要上7 x M | Y v传文件就必须要身份验证,身份验证的接_ | ~ : 1口上一篇文章也说了,先安装Basic-Auth插件

  1. //通过Rest API保存文件H 4 W `
  2. functionz % r s y E W b a brain_n } 7 0 7 U ,wp_api_upload( $filedata ){
  3. $file_url = $filed- } U [ F o q .ata['tmp_namc t { v T we+ # W N w 0'];
  4. $file_content=file_get_contents($file_url);
  5. $url: X _ \ / 1 Y m |_api = site_url(g b ! o K s N"/wp-js~ h 2 a Z x 6 Jon/wp/v2/media/");
  6. $file_name = $filedata['name'];
  7. $ch = curl_init();
  8. curl_setopt($ch,= \ 9 z [ + ~ A CURLOPT_URL, $url_api );
  9. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1 );
  10. curl_setopt($ch, CURLOPT_POST, 1 );
  11. curl_s\ N 5etopt($ch, CURLOPT_POSTFIE9 @ I }LDS, $file_content);
  12. curl_se? ) L f | F 3topt($ch, CURLOPT_HTTPHEADER, array(
  13. 'contg # & nent-disposition: attachmenN & X Z 1t; filename="'.$file_nameA f | K 6.'"',
  14. 'authorizatiT o [ & z Hon: BasiO 1 = O ` $c ' . base64_encode('username:password')
  15. //'authori@ 7 = q o \ Fzation: ' . $_SERV) z - A i n Y kER['HTTP_AUTHORIZATION']
  16. )
  17. );
  18. $result=curl_exec0 h K K h D g v40;$chE c * \ c B | . y1;;
  19. if(json_decode($result)->id){
  20. return json_decode($result)->guid->rendered ;
  21. }\ B +e( J 0lse{
  22. return j) s b ; [ ~ \ x lson_decode($result)-&gN B P Ut;dato B H N X i } S -a->status . " " .json_decode($result)->message;
  23. }
  24. }
  25. //获取提交的内容,并调用brain_wp_api_upload这个函数返回的文件URL
  26. if(!empty($_FIu B !LES['pro_document']['tmp_name'])| ! C n ; # Y . k41;{
  27. $pro_document = brain_wp_api_upload( $_FILES['pro_document'] );
  28. echo "pro_document: ".$pro_document. "<br/>";
  29. }else{
  30. $pro_document = ""p [ :;
  31. }
  32. ...
  33. //后续的一系列处理

最后,因为是对外使用的上传功能,还需要单独开设个子目录上传文件单独保存,以免和文章等其他附件混| = ; q U %淆在一起。用 upload_dir 这个钩子,通过识别上传的用户p v N n \ id 临时修改目录:

  1. add_filter( 'upload_dir', 'brai+ y [ Hn_change_upload_dir_cG w : u yt' );
  2. function brain_change_upload_dir| % y 0 @ X + k G_ct( $upload ) 7 + C - ! O \ $123;
  3. if( get_current) m g w %_user_id()== 2 ){//basic认证的用户id
  4. $upload['subdir']t h 8 H } h D = '/subfolder'R j Z 7 $ = $ F; //子目录名
  5. $upload[X u X w $ y ='path'&d n 5 V H - @ (#93; = $upload['basedir'] . $uploadu ; 7 6 H o v91;'sug & 5 J @ ;bdir'{ 4 S93;;
  6. $upload['url'&i w M#93;! B W = $uplo- f 2 _ i 5 J !ad['baseurl'] . $upload['subdir'];
  7. }
  8. return $upload;
  9. }

其实后来找了下 Gravity Forms 也- | ^ \有实现类似功C H ( P w l能的外挂,比如 这个,前端是原生的也有,比如 这个。可惜这些都不完全符合我的应用场景。在提交表单之前,我只想让用户先选定本地文件,而并不是立即上传,我表单里还有很多其他选项以及用了验证码系统,在表单提交后通过验证,再上传文件,这样可以避免网站被滥传一些无用的K - J # +文件甚至是木马。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

wordpress如何添加调用侧边栏小工具功能

2022-8-5 14:03:28

WordPress教程

WordPress 定制短代码简码实现商品倒计时功能

2022-8-5 14:04:45

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索