ajax上传图片监听

测试地址：http://www.jq22.com/jquery-info9594

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件</title>
<link rel="stylesheet" href="base.css" />
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<style>
.fileBox{margin:50px;}
.fileInputP{display:inline-block;200px;height:30px;border-radius:5px;overflow:hidden;position:relative;}
.fileInputP i{display:inline-block;200px;height:30px;color:#fff;background:#7d8f33;text-align:center;line-height:30px;}
#fileInput{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;}
#fileSpan{display:inline-block;300px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;}

.fileList_parent{margin:50px;display:none;}
.fileList_parent th{background:#dadada;font-weight:bold;}
.fileList_parent th,.fileList_parent td{padding:5px;}
.fileList tr:nth-of-type(2n){background:#dadada;}

.progressParent{200px;height:20px;border-radius:5px;background:#ccc;overflow:hidden;position:relative;}
.progress{0%;height:20px;background:#7d8f33;margin: 0px;}

.progressNum{display:inline-block;100%;height:20px;text-align:center;line-height:20px;color:#fff;position:absolute;left:0;top:0;}

#fileBtn{margin-left:50px;display:none;}
</style>

<script>
$(function(){

   //元素
   var oFileBox = $(".fileBox");                   //选择文件父级盒子
   var oFileInput = $("#fileInput");               //选择文件按钮
   var oFileSpan = $("#fileSpan");                   //选择文件框

   var oFileList_parent = $(".fileList_parent");   //表格
   var oFileList = $(".fileList");                   //表格tbody
   var oFileBtn = $("#fileBtn");                   //上传按钮

   var flieList = [];                               //数据，为一个复合数组
   var sizeObj = [];                               //存放每个文件大小的数组，用来比较去重

   //拖拽外部文件，进入目标元素触发
   oFileSpan.on("dragenter",function(){
       $(this).text("可以释放鼠标了！").css("background","#ccc");
   });

   //拖拽外部文件，进入目标、离开目标之间，连续触发
   oFileSpan.on("dragover",function(){
       return false;
   });

   //拖拽外部文件，离开目标元素触发
   oFileSpan.on("dragleave",function(){
       $(this).text("或者将文件拖到此处").css("background","none");
   });

   //拖拽外部文件，在目标元素上释放鼠标触发
   oFileSpan.on("drop",function(ev){
       var fs = ev.originalEvent.dataTransfer.files;
       analysisList(fs);       //解析列表函数
       $(this).text("或者将文件拖到此处").css("background","none");
       return false;
   });

   //点击选择文件按钮选文件
   oFileInput.on("change",function(){
       analysisList(this.files);
   })


   //解析列表函数
   function analysisList(obj){
       //如果没有文件
       if( obj.length<1 ){
           return false;
       }

       for( var i=0;i<obj.length;i++ ){

           var fileObj = obj[i];       //单个文件
           var name = fileObj.name;   //文件名
           var size = fileObj.size;   //文件大小
           var type = fileType(name);   //文件类型，获取的是文件的后缀

           //文件大于30M，就不上传
           if( size > 1024*1024*1024 || size == 0 ){
               alert('“'+ name +'”超过了30M，不能上传');
               continue;
           }

           //文件类型不为这三种，就不上传
           /*if( ("pdf/txt/epub").indexOf(type) == -1 ){
               alert('“'+ name +'”文件类型不对，不能上传');
               continue;
           }*/

           //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
           if( sizeObj.indexOf(size) != -1 ){
               alert('“'+ name +'”已经选择，不能重复上传');
               continue;
           }

           //给json对象添加内容，得到选择的文件的数据
           var itemArr = [fileObj,name,size,type];   //文件，文件名，文件大小，文件类型
           flieList.push(itemArr);

           //把这个文件的大小放进数组中
           sizeObj.push(size);

       }

       //console.log(flieList)
       //console.log(sizeObj)
       createList()               //生成列表
       oFileList_parent.show();   //表格显示
       oFileBtn.show();           //上传按钮显示
   };


   //生成列表
   function createList(){
       oFileList.empty();                   //先清空元素内容
       for( var i=0;i<flieList.length;i++ ){

           var fileData = flieList[i];       //flieList数组中的某一个
           var objData = fileData[0];       //文件
           var name = fileData[1];           //文件名
           var size = fileData[2];           //文件大小
           var type = fileData[3];           //文件类型
           var volume = bytesToSize(size);   //文件大小格式化


           var oTr = $("<tr></tr>");
           var str = '<td><cite title="'+ name +'">'+ name +'</cite></td>';
           str += '<td>'+ type +'</td>';
           str += '<td>'+ volume +'</td>';
           str += '<td><input type="radio" /></td>';
           str += '<td>';
           str += '<div class="progressParent">';
           str += '<p class="progress"></p>';
           str += '<span class="progressNum">0%</span>';
           str += '</div>';
           str += '</td>';
           str += '<td><a href="javascript:;" class="operation">删除</a></td>';

           oTr.html(str);
           oTr.appendTo( oFileList );
       }
   }

   //删除表格行
   oFileList.on("click","a.operation",function(){
       var oTr = $(this).parents("tr");
       var index = oTr.index();
       oTr.remove();       //删除这一行
       flieList.splice(index,1);   //删除数据
       sizeObj.splice(index,1);   //删除文件大小数组中的项

       //console.log(flieList);
       //console.log(sizeObj);

   });


   //上传
   oFileBtn.on("click",function(){
       oFileBtn.off();
       var tr = oFileList.find("tr");       //获取所有tr列表
       var successNum = 0;                   //已上传成功的数目
       oFileList.off();                   //取消删除事件
       oFileBox.slideUp();                   //隐藏输入框
       oFileList.find("a.operation").text("等待上传");


       for( var i=0;i<tr.length;i++ ){
           uploadFn(tr.eq(i),i);       //参数为当前项，下标
       }

       function uploadFn(obj,i){

           var formData = new FormData();
           var arrNow = flieList[i];                       //获取数据数组的当前项

           // 从当前项中获取上传文件，放到 formData对象里面，formData参数以key name的方式
           var result = arrNow[0];                           //数据
           formData.append("imageFile" , result);

           var name = arrNow[1];                           //文件名
           formData.append("email" , name);

           var progress = obj.find(".progress");           //上传进度背景元素
           var progressNum = obj.find(".progressNum");       //上传进度元素文字
           var oOperation = obj.find("a.operation");       //按钮

           oOperation.text("正在上传");                           //改变操作按钮
           oOperation.off();

           var request = $.ajax({
               type: "POST",
               url: "../more/cModifyImageAction.go",
               data: formData,           //这里上传的数据使用了formData 对象
               processData : false,    //必须false才会自动加上正确的Content-Type
               contentType : false,

               //这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
               xhr: function(){
                   var xhr = $.ajaxSettings.xhr();
                   if(onprogress && xhr.upload) {
                       xhr.upload.addEventListener("progress" , onprogress, false);　
                       return xhr;
                   }
               },

               //上传成功后回调
               success: function(){
                   oOperation.text("成功");
                   successNum++;
                   console.log(successNum);
                   if(successNum == tr.length){
                       open("http://www.baidu.com","_self");   //如果全部传成功了，跳转
                   }
               },

               //上传失败后回调
               error: function(){
                   oOperation.text("重传");
                   oOperation.on("click",function(){
                       request.abort();       //终止本次
                       uploadFn(obj,i);
                   });
               }

           });


           //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
           function onprogress(evt){
               alert(evt.loaded);
               var loaded = evt.loaded;   //已经上传大小情况
               var tot = evt.total;       //附件总大小
               var per = Math.floor(100*loaded/tot); //已经上传的百分比
               progressNum.html( per +"%" );
               progress.css("width" , per +"%");
           }


       }


   });


});

//字节大小转换，参数为b
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

//通过文件名，返回文件的后缀名
function fileType(name){
   var nameArr = name.split(".");
   return nameArr[nameArr.length-1].toLowerCase();
}

</script>
</head>

<body>

<div class="fileBox">
    <p class="fileInputP vm">
       <i>选择文件</i>
       <input type="file" multiple id="fileInput" />
    </p>
    <span id="fileSpan" class="vm">或者将文件拖到此处</span>
    <div class="mask"></div>
</div>

<table width="50%" border="1" class="fileList_parent">
   <thead>
       <tr>
           <th>书名</th>
            <th>类型</th>
            <th>大小</th>
           <th>私藏</th>
           <th>进度</th>
           <th>操作</th>
       </tr>
   </thead>

   <tbody class="fileList">
       
    </tbody>

</table>

<input type="button" value="上传" id="fileBtn" />

</body>
</html>

相关阅读:
webService 的使用
前端框架——树形结构Ztree的使用
vue使用问题总结（长期更新）
yum安装配置MySQL数据库
kworkerds挖矿木马
zabbix 中文乱码
GIT 仓库的搭建
ELK 收集交换机日志（以华为交换机为例）
Zabbix 邮箱告警（Python脚本）
Tomcat8性能优化

原文地址：https://www.cnblogs.com/jiahaoJAVA/p/7063298.html