html实现拖拽上传文件

原创 Laughing  2019-06-08 10:47  阅读 8 次 评论 0 条

创建前台界面

  1. var SWZCupload = '<div style="text-align:center"><div style="display:none;" name="single" style="text-align: center; "><a class="layui-btn" style="width:100%;" href="javascript:void(0);"><input  id="file" type="file" style="display:none;" name="file" multiple="multiple" onchange="javascript:onc();" /></a></div><div name="dropbox" onclick="fileUploadClick(this)" id="dropbox" class="xmdr-uploadfile-area"><p class="xmdr-uploadfile-text">点击或将文字拖拽到这里上传</p><p class="xmdr-uploadfile-support">支持扩展名:.xls .xlsx..</p></div><div style="text-align: center; "><button class="layui-btn" type="button"  onclick="javascript:Upload();">上传</button></div><div id="fileliststring" style="margin-top:15px;"></div></div>';  

定义脚本

  1. var uploadFiles = new Array();  
  2.   
  3. function AddFiles(files) {  
  4.     var errstr = "";  
  5.     for (var i = 0; i < files.length; i++) {  
  6.         var filename = files[i].name;  
  7.         var isfind = false;  
  8.         for (var j = 0; j < uploadFiles.length; j++) {  
  9.             if (uploadFiles[j].name == filename) {  
  10.                 isfind = true;  
  11.                 break;  
  12.             }  
  13.         }  
  14.   
  15.         var index1 = filename.lastIndexOf(".");  
  16.         var index2 = filename.length;  
  17.         var postf = filename.substring(index1 + 1, index2);//后缀名    
  18.         var myarray = new Array('JPG', 'jpg', 'jpeg', 'JPEG', 'gif', 'GIF', 'png', 'PNG');  
  19.   
  20.         //if ($.inArray(postf, myarray) == -1) {  
  21.         //    errstr += filename + "/";  
  22.         //    continue;  
  23.         //}  
  24.         if (isfind == false) {  
  25.             uploadFiles.push(files[i]);  
  26.         }  
  27.     }  
  28.   
  29.     if (errstr != "") {  
  30.         layer.alert("文件格式错误:" + errstr);  
  31.     }  
  32.   
  33.     var fileliststring = "";  
  34.   
  35.     for (var j = 0; j < uploadFiles.length; j++) {  
  36.         fileliststring += "<p style='text-align:left;margin-left:25px;' class='filename'><a href='javascript:void(0)'><image style='height:25px;margin-right:20px;' src='../Images/delete14X14.png'/ onclick='fileDeleteClick(this)'>" + uploadFiles[j].name + "</a>   大小:" + (uploadFiles[j].size / 1000) + "k" + "</p></br>";  
  37.     }  
  38.   
  39.     document.getElementById("fileliststring").innerHTML = fileliststring;  
  40. }  
  41.   
  42. function onc() {  
  43.     var files = document.getElementById("file").files;  
  44.   
  45.     if (files.length < 0) {  
  46.         return;  
  47.     }  
  48.     AddFiles(files);  
  49. }  
  50.   
  51. function Upload() {  
  52.     AddFiles(new Array());  
  53.     if (uploadFiles.length <= 0) {  
  54.         return;  
  55.     }  
  56.     uploadcount = uploadFiles.length;  
  57.     var FileController = "../Controller/ZCJSMainPage.ashx?func=uploadfile";                    // 接收上传文件的后台地址  
  58.     // FormData 对象  
  59.     var formData = new FormData();  
  60.     formData.append("file", uploadFiles[0]);  
  61.     formData.append('jhid', jhid);  
  62.     formData.append('yjjl', $("#uploadify").attr('yjjl'));  
  63.     var type = $(".div_fl.selected")[0].id;  
  64.     type = type.split('-')[1];  
  65.     formData.append('type', type);  
  66.     // XMLHttpRequest 对象  
  67.     var xhr = new XMLHttpRequest();  
  68.     xhr.open("post", FileController, true);  
  69.     xhr.onload = function () {  
  70.         Upload();  
  71.     };  
  72.     xhr.send(formData);  
  73.     uploadFiles.splice(0, 1);  
  74. }  
  75.   
  76. function fileUploadClick(obj) {  
  77.     $("#file").click();  
  78. }  
  79.   
  80. function fileDeleteClick(obj) {  
  81.     layer.alert('确定要删除选中的附件吗?', {  
  82.         closeBtn: 1    // 是否显示关闭按钮          
  83.         , btn: ['是', '否'] //按钮  
  84.         , yes: function () {  
  85.             var filename = $(obj).parent().text();  
  86.             for (var j = 0; j < uploadFiles.length; j++) {  
  87.                 if (uploadFiles[j].name == filename) {  
  88.                     uploadFiles.splice(j, 1);  
  89.                     break;  
  90.                 }  
  91.             }  
  92.             $(obj).parent().parent().next("br").remove();  
  93.             $(obj).parent().parent().remove();  
  94.             layer.closeAll();  
  95.         }  
  96.     });  
  97. }  
本文地址:https://www.lisen.me/drag-and-drop-upload-files-in-html.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情