Huplaodfiy---圖片文件上傳插件修改

時間 2019-11-08

標籤 huplaodfiy 圖片文件上傳插件修改简体版

原文原文鏈接

說明：javascript

本文是將Hupladify進行修改，實現功能：css

1.批量上傳html

2.預覽java

3.多選去重jquery

問題：ajax

不兼容IE10如下瀏覽器後端

實例：數組

html：瀏覽器

<link rel="stylesheet" type="text/css" href="Huploadify.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.Huploadify.js"></script>

 1 <body>
 2 
 3 <div class="upload uploadStyle uploadify" ></div>
 4 
 5 <div class="preview_model">
 6    <div class="preview_model_container">
 7      <img id="preview_img" src="" />
 8    </div>
 9 </div>
10 
11 
12 </body>

js：app

 1 <script type="text/javascript">
 2 $(function(){
 3     $(".preview_model").click(function(){
 4         $(this).hide();
 5     });
 6     $('.uploadify').Huploadify({
 7         auto:false,
 8         preview:true,
 9         fileTypeExts:'*.jpg;*.png;*.bmp;*.docx;*.xsl;*.doc;*.rar;',
10         multi:true,
11         formData:{key:123456,key2:'vvvv'},
12         fileSizeLimit:9999,
13         showUploadedPercent:true,//是否實時顯示上傳的百分比，如20%
14         showUploadedSize:true,
15         fileObjName:'attachmentFile',
16         removeTimeout:1000,
17         uploader:'http://localhost:8181/front/customer/distributor/uploadAttachment.action',
18         onUploadStart:function(){
19             //alert('開始上傳');
20             },
21             onUploadSuccess:function(){
22                 alert("上傳成功");
23             },
24             onUploadError:function(){
25                 alert("上傳失敗");
26                
27             },
28         onInit:function(){
29             
30             //alert('初始化');
31             },
32         onUploadComplete:function(){
33             //alert("上傳完成");
34             $(".uploadify-all-button").off("click");
35             },
36         onCancel:function(file){
37             
38             
39          }
40         });
41     
42      
43     });
44     
45     
46 </script>

Huploadify.js

(function($){
$.fn.Huploadify = function(opts){
    
    var itemTemp = '';
     itemTemp += '<div id="${fileID}" class="uploadify-queue-item">'
     itemTemp +=     '<div class="uploadify-content">'
     itemTemp +=       '<span class="up_filename">${fileName}</span>'
     itemTemp +=     '</div>'
     itemTemp +=     '<div class="uploadify-bar">'
     itemTemp +=     '<div class="uploadify-progress-container">'     
     itemTemp +=        '<div class="uploadify-progress"><div class="uploadify-progress-bar"></div></div>'
     itemTemp +=     '</div>'
     itemTemp +=     '<span class="uploadbtn"></span>'
     itemTemp +=     '<span class="delfilebtn"></span>'
         
     itemTemp +=     '</div>'
     
     itemTemp += '</div>';
     
     var fileArr = [];
     
     
     var defaults = {
        fileTypeExts:'',//容許上傳的文件類型，格式'*.jpg;*.doc'
        uploader:'',//文件提交的地址
        auto:false,//是否開啓自動上傳
        preview:false,//是否預覽
        method:'post',//發送請求的方式，get或post
        multi:true,//是否容許選擇多個文件
        formData:null,//發送給服務端的參數，格式：{key1:value1,key2:value2}
        fileObjName:'file',//在後端接受文件的參數名稱，如PHP中的$_FILES['file']
        fileSizeLimit:1024*10,//容許上傳的文件大小，單位KB
        showUploadedPercent:true,//是否實時顯示上傳的百分比，如20%
        showUploadedSize:false,//是否實時顯示已上傳的文件大小，如1M/2M
        buttonText:'選擇文件',//上傳按鈕上的文字
        uploadbtnText:'上傳',
        removeTimeout: 1000,//上傳完成後進度條的消失時間
        itemTemplate:itemTemp,//上傳隊列顯示的模板
        onUploadStart:null,//上傳開始時的動做
        onUploadSuccess:null,//上傳成功的動做
        onUploadComplete:null,//上傳完成的動做
        onUploadError:null, //上傳失敗的動做
        onInit:null,//初始化時的動做
        onCancel:null//刪除掉某個文件後的回調函數，可傳入參數file
    }
        
    var option = $.extend(defaults,opts);
    
    //將文件的單位由bytes轉換爲KB或MB，若第二個參數指定爲true，則永遠轉換爲KB
    var formatFileSize = function(size,byKB){
        if (size> 1024 * 1024&&!byKB){
            size = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        }
        else{
            size = (Math.round(size * 100 / 1024) / 100).toString() + 'KB';
        }
        return size;
    }
    //根據文件序號獲取文件
    var getFile = function(index,files){
        for(var i=0;i<files.length;i++){       
          if(files[i].index == index){
              return files[i];
            }
        }
        return false;
    }
    
    //將輸入的文件類型字符串轉化爲數組,原格式爲*.jpg;*.png
    var getFileTypes = function(str){
        var result = [];
        var arr1 = str.split(";");
        for(var i=0,len=arr1.length;i<len;i++){
            result.push(arr1[i].split(".").pop());
        }
        return result;
    }
    
    
    
    this.each(function(index,item){
        
        
        
        var _this = $(this);
        //先添加上file按鈕和上傳列表
        var instanceNumber =index;
        
        var inputStr = '';
         inputStr+='<div class="operate-btn">'
        inputStr += '<input id="select_btn_'+index+'" class="selectbtn"  style="display:none;" type="file" name="fileselect[]"';
        inputStr += option.multi ? ' multiple' : '';
        inputStr += ' accept="';
        inputStr += getFileTypes(option.fileTypeExts).join(",");
        inputStr += '"/>';
        inputStr += '<a id="file_upload_'+index+'-button" href="javascript:void(0)" class="uploadify-button">';
        inputStr += option.buttonText;
        inputStr += '</a>';
        inputStr += '<a id="file_upload_all_'+index+'-button" href="javascript:void(0)" class="uploadify-all-button">';
        inputStr += option.uploadbtnText
        inputStr += '</a>';
         inputStr+= '</div>';
        var uploadFileListStr = '<div id="file_upload_'+index+'-queue" class="uploadify-queue"></div>';
        _this.append(uploadFileListStr+inputStr);    
        
        
        //建立文件對象
      var fileObj = {
          fileInput: _this.find('.selectbtn'),                //html file控件
          uploadFileList : _this.find('.uploadify-queue'),
          url: option.uploader,                        //ajax地址
          fileFilter: [],                    //過濾後的文件數組
          filter: function(files) {        //選擇文件組的過濾方法
              
              var arr = [];
              var typeArray = getFileTypes(option.fileTypeExts);
              
              if(typeArray.length>0){
                  for(var i=0,len=files.length;i<len;i++){
                      var thisFile = files[i];
                  
                          if(parseInt(formatFileSize(thisFile.size,true))>option.fileSizeLimit){
                              alert('文件'+thisFile.name+'大小超出限制！');
                              continue;
                          }
                        if($.inArray(thisFile.name.split('.').pop(),typeArray)>=0){
                            arr.push(thisFile);    
                        }
                        else{
                            alert('文件'+thisFile.name+'類型不容許！');
                        }      
                    }    
                }
            
              return arr;      
          },
          //文件選擇後
          onSelect: function(files){
             
                for(var i=0,len=files.length;i<len;i++){
                    var file = files[i];
                    
                    
                    //處理模板中使用的變量
                    var $html = $(option.itemTemplate.replace(/\${fileID}/g,'fileupload_'+instanceNumber+'_'+file.index).replace(/\${fileName}/g,file.name).replace(/\${fileSize}/g,formatFileSize(file.size)).replace(/\${instanceID}/g,_this.attr('id')));
                    
//                    //若是是自動上傳，去掉上傳按鈕
//                    if(option.auto){
//                        $html.find('.uploadbtn').remove();
//                    }
                    //是否預覽
                    if(option.preview){
                        //console.log(file.name.split('.').pop());
                        if(file.name.split('.').pop().toUpperCase() == "PNG" || file.name.split('.').pop().toUpperCase() == "JPG" || file.name.split('.').pop().toUpperCase() == "GIF" || file.name.split('.').pop().toUpperCase() == "JPEG" ||file.name.split('.').pop().toUpperCase() == "BMP" ){
                            //處理預覽路徑
                             var path;  
                                if(document.all)//IE  
                                {  
                                   // imgFile.select();  
                                    path = document.selection.createRange().text;  
                                    var preview = '';
                                    preview +=     '<div id="img_upload_show_'+index+'_'+file.index+'" style="width:60px;height:60px;vertical-align:middle;display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="scale",src=\"" + path + "\");">'
                                    preview +=       
                                    preview +=     '</div>'
                                   
                                   // document.getElementById("img_upload_show_"+index+"_"+file.index).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用濾鏡效果        
                                }  
                                else//FF  
                                {  
                                    path=window.URL.createObjectURL(file);// FF 7.0以上  
                                   
                                    
                                    var preview = '';
                                    preview +=     '<div id="img_upload_show_'+index+'_'+file.index+'" style="width:60px;height:60px;vertical-align:middle;display:inline-block">'
                                    preview +=       '<img id="img_show_'+index+'_'+file.index+'" src="'+path+'" width="60px" height="60px" />'
                                    preview +=     '</div>'
                                    //path = imgFile.files[0].getAsDataURL();// FF 3.0  
                                    
                                    // 
                                    //document.getElementById("img1").src = path;  
                                }  
                            
                            $html.append(preview);
                            $html.find('#img_show_'+index+'_'+file.index).on('click',function(){
                                
                                var previewPath = $(this)[0].src;
                                document.getElementById("preview_img").src = previewPath;
                                $(".preview_model").show();
                             });
                        }

                        
                    }
                    this.uploadFileList.append($html);
                    
                    //判斷是否顯示已上傳文件大小
                    if(option.showUploadedSize){
                        
                        var num = '<span class="progressnum"><span class="uploadedsize">0KB</span>/<span class="totalsize">${fileSize}</span></span>'.replace(/\${fileSize}/g,formatFileSize(file.size));
                        $html.find('.uploadify-content').append(num);
                    }
                    
                    //判斷是否顯示上傳百分比    
                    if(option.showUploadedPercent){
                        var percentText = '<span class="up_percent">0%</span>';
                        $html.find('.uploadify-progress').after(percentText);
                    }
                    //判斷是不是自動上傳
                    if(option.auto){
                        this.funUploadFile(file);
                        $html.find('.uploadbtn').hide();
                    }
                    else{
                        $html.find('.uploadbtn').hide();
//                        //若是配置非自動上傳，綁定上傳事件
                        
                            _this.find('.uploadify-all-button').on('click',(function(file){
                                
                             return function(){fileObj.funUploadFile(file);}
                             
                         })(file));

                         
                    }
                    //爲刪除文件按鈕綁定刪除文件事件
                     $html.find('.delfilebtn').on('click',(function(file){
                                 return function(){fileObj.funDeleteFile(file.index);}
                             })(file));
                 }

             
            },                
          onProgress: function(file, loaded, total) {

                var eleProgress = _this.find('#fileupload_'+instanceNumber+'_'+file.index+' .uploadify-progress');
                var percent = (loaded / total * 100).toFixed(2) +'%';
                if(option.showUploadedSize){
                    eleProgress.nextAll('.progressnum .uploadedsize').text(formatFileSize(loaded));
                    eleProgress.nextAll('.progressnum .totalsize').text(formatFileSize(total));
                }
                if(option.showUploadedPercent){
                    eleProgress.nextAll('.up_percent').text(percent);    
                }
                eleProgress.children('.uploadify-progress-bar').css('width',percent);
          },        //文件上傳進度

          /* 開發參數和內置方法分界線 */
          
          //獲取選擇文件，file控件
          funGetFiles: function(e) {      
              // 獲取文件列表對象
              var files = e.target.files;
              
              //繼續添加文件
              files = this.filter(files);
              var fileFilterNames = [];
              var filesNew =[];
              for(var j=0;j<this.fileFilter.length;j++){
                    
                  fileFilterNames.push(this.fileFilter[j].name )
                  
                 }
            
                 for(var i=0,len=files.length;i<len;i++){
                    
                     if(fileFilterNames.indexOf(files[i].name) < 0 ){
                         this.fileFilter.push(files[i]);
                         filesNew.push(files[i]);
                         
                     }
                    
                 } 
            
              this.funDealFiles(filesNew);
              return this;
          },
          
          //選中文件的處理與回調
          funDealFiles: function(files) {
              var fileCount = _this.find('.uploadify-queue .uploadify-queue-item').length;//隊列中已經有的文件個數
              for(var i=0,len=files.length;i<len;i++){
                  files[i].index = ++fileCount;
                  files[i].id = files[i].index;
                  files[i].isUpload = false;
                
                  }
              //執行選擇回調
              this.onSelect(files);
              
              return this;
          },
          
          //刪除對應的文件
          funDeleteFile: function(index) {
              for (var i = 0,len=this.fileFilter.length; i<len; i++) {
                      var file = this.fileFilter[i];
                      if (file.index == index) {
                          this.fileFilter.splice(i,1);
                          _this.find('#fileupload_'+instanceNumber+'_'+index).fadeOut();
                         
                          option.onCancel&&option.onCancel(file);    
                          break;
                      }
                      
              }
              return this;
          },
          
          //文件上傳
          funUploadFile: function(file) {
              var xhr = false;
              try{
                 xhr=new XMLHttpRequest();//嘗試建立 XMLHttpRequest 對象，除 IE 外的瀏覽器都支持這個方法。
              }catch(e){      
                xhr=ActiveXobject("Msxml12.XMLHTTP");//使用較新版本的 IE 建立 IE 兼容的對象（Msxml2.XMLHTTP）。
              }
              
              if (xhr.upload) {
                  // 上傳中
                  xhr.upload.addEventListener("progress", function(e) {
                      fileObj.onProgress(file, e.loaded, e.total);
                  }, false);
      
                  // 文件上傳成功或是失敗
                  xhr.onreadystatechange = function(e) {
                      if (xhr.readyState == 4) {
                          if (xhr.status == 200) {
                              //校訂進度條和上傳比例的偏差
                              var thisfile = _this.find('#fileupload_'+instanceNumber+'_'+file.index);
                              thisfile.find('.uploadify-progress-bar').css('width','100%');
                                option.showUploadedSize&&thisfile.find('.uploadedsize').text(thisfile.find('.totalsize').text());
                                option.showUploadedPercent&&thisfile.find('.up_percent').text('100%');
                                 _this.find('#fileupload_'+instanceNumber+'_'+file.index).find(".uploadify-content").css("color","#666");
                              option.onUploadSuccess&&option.onUploadSuccess(file, xhr.responseText);
                              //在指定的間隔時間後刪掉進度條
                              setTimeout(function(){
                                  _this.find('#fileupload_'+instanceNumber+'_'+file.index).find(".uploadify-progress").fadeOut();
                                  _this.find('#fileupload_'+instanceNumber+'_'+file.index).find(".up_percent").fadeOut();
                                  _this.find('#fileupload_'+instanceNumber+'_'+file.index).find(".delfilebtn").fadeOut();
                                  
                              },option.removeTimeout);
                          } else {
                              _this.find('#fileupload_'+instanceNumber+'_'+file.index).find(".uploadify-content").css("color","red");
                              option.onUploadError&&option.onUploadError(file, xhr.responseText);        
                          }
                          option.onUploadComplete&&option.onUploadComplete(file,xhr.responseText);
                          //清除文件選擇框中的已有值
                          fileObj.fileInput.val('');
                          file.isUpload = true;
                      }
                  };
      
                  option.onUploadStart&&option.onUploadStart();    
                  // 開始上傳
                  xhr.open(option.method, this.url, true);
                  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                  var fd = new FormData();
                  fd.append(option.fileObjName,file);
                  if(option.formData){
                      for(key in option.formData){
                          fd.append(key,option.formData[key]);
                      }
                  }
                  
                  xhr.send(fd);
              }    
              
                  
          },
          
          init: function() {      
              //文件選擇控件選擇
              if (this.fileInput.length>0) {
                  
                  this.fileInput.change(function(e) { 
                      
                      fileObj.funGetFiles(e); 
                  });    
              }
              
              //點擊上傳按鈕時觸發file的click事件
              _this.find('.uploadify-button').on('click',function(){
                  _this.find('.selectbtn').trigger('click');
                });
              
              option.onInit&&option.onInit();
          }
      };

        //初始化文件對象
        fileObj.init();
    }); 
}    

})(jQuery)

Huploadify.css

@charset "utf-8";
/* CSS Document */
/* .uploadify-button{
    display:inline-block;
    margin:12px;
    border:1px solid #808080;
    background-color: #707070;
    line-height:24px;
    border-radius:12px;
    padding:0 18px;
    font-size:12px;
    font-weight: 600;
    font-family: '微軟雅黑';
    color:#FFF;
    cursor:pointer;
    text-decoration:none;
} */
.uploadify-button:hover{
    background-color: #00a2d4;
}
.uploadfile{
    width:0;
    }
.uploadify-queue .uploadify-queue-item{
    list-style-type:none;
    margin-top:10px;
    }
.uploadbtn,.delfilebtn{
    display:inline-block;
    /* border:1px solid #999;
    line-height:24px;
    border-radius:4px; */
    padding:0 18px;
    font-size:12px;
    color:#666;
    cursor:pointer;
    background:url(./toolbars.png) repeat-x 0 0;
    text-decoration:none;
    }
.up_filename,.progressnum,.delfilebtn,.uploadbtn,.up_percent{
    font-size:12px;
    color:#666;
    margin-left:10px;
    }
.uploadify-progress{
     display:inline-block; 
     width:600px; 
     height:2px; 
     background-color:#badff8;
     border-radius:20px;
     /*border:2px groove #666;*/
     vertical-align:middle;
     padding:0;
     }
.uploadify-progress-bar{
    width:0;
    height:100%;
    border-radius:20px;
    background-color: #0099FF;
    }
/*8888888888888888*/

.uploadStyle{
position: relative;
width:600px;
    padding: 20px 15px 15px;
    margin: 15px 0;
    background-color: #fafafa;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    }
    .uploadify-bar {
    display:inline-block;
    width:260px;
    }
    .uploadify-progress-container {
      display:inline-block;
      width:200px;
    }
    .operate-btn {
    height:40px;
    }
.uploadify-button,
.uploadify-all-button{
  position: relative;
  float:right;
    display: inline-block;
    background: #00b7ee;
    padding: 8px 15px;
    margin-top: 10px;
    margin-left: 20px;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    font-family: '微軟雅黑';
    cursor:pointer;
    font-size:14px;
    text-decoration:none;
}
.uploadify-progress {
  width:150px;
}
.uploadify-queue .uploadify-queue-item {
   
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.uploadbtn {
  width: 20px;
    height: 20px;
    margin-left:20px;
  background-position: 0px -150px;
}
.delfilebtn {
  width: 10px;
    height: 22px;
background-position: 0px -190px;
  
}
.up_percent {
display:inline-block;
width:24px;
}
.uploadify-progress {
height:10px;
}
.uploadify-progress-bar {
height:10px;
}
.uploadify-content {
display:inline-block;
margin-right:10px;
    width: 240px;
}

.preview_model{
    display:none;
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    left:0;
    min-height:100%;
    min-width:100%;
    background-color: rgba(0,0,0,0.5);
    }
    .preview_model_container {
         
    width: 800px;
    height: 500px;
    margin: 100px auto;
    text-align: center;
    margin-bottom: 0;
    overflow: auto;
    }
   #preview_img {
    /* position: absolute;
    top: 20%;
    left: 33%; */
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。