Jquer + Ajax 製做上傳圖片文件

 

沒什麼 說的  直接 上代碼  

//選擇圖片並上傳
function selectImg(node){
    var f = node.value;
    var file = node.files[0];
    if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(f)){
           
        alert("圖片類型必須是.gif,jpeg,jpg,png,bmp中的一種");
            return false;
        
    }else{
        
        var reader = new FileReader();
        if (file) {
            reader.readAsDataURL(file);
        } 
        reader.onloadend = function () {
            
            $("#imgSelect").before(
                    "<div class='col-md-1' id='tempImg'>"+
                    "<span class='glyphicon glyphicon-remove pull-right bottom' style='display:none' " +
                    "onclick=removeImg($(this).parent().attr('id'))></span>"+
                    
                    "<a href='#' class='thumbnail'>"+
                    "<img src='"+reader.result+"'>"+
                    "</a>"+
                    "</div>"
            );
        }
        uploadFile(file,"img");
    }
    
}
//上傳文件
function uploadFile(file,type){
     var fd = new FormData();  
     fd.append("tf", file);  
       
     $.ajax({  
         url: "/a/upload",  
         type: 'POST',  
         data: fd,  
         processData: false,//用來回避jquery對formdata的默認序列化，XMLHttpRequest會對其進行正確處理  
         contentType: false,//設爲false纔會得到正確的conten-Type  
         xhr: function() { //用以顯示上傳進度  
             var xhr = $.ajaxSettings.xhr();  
             if (xhr.upload) {  
                 xhr.upload.addEventListener('progress', function(e) {
                     var appendStr = 
                         "<div class='progress' style='height:5px'>"+
                         "<span class='progress-bar' role='progressbar' aria-valuenow='"+e.loaded+"'" +
                         " aria-valuemin='0' aria-valuemax='100' style='width: "+e.loaded+"%;'>"+
                         "<span class='sr-only'>60% 完成</span>"+
                         "</span>"+
                         "</div>"
                     if(type=="img"){
                         
                         $("#tempImg").append(
                            appendStr
                         );
                     }else{
                         
//                         $("#tempFile").append(appendStr);
                     }
//                     $('#loading').text(<span style="font-family: Arial, Helvetica, sans-serif;">e.loaded/e.total*100</span>);  
                 }, false);  
             }  
             return xhr;  
         },  
         async: true  
     }).then(function(data) { 
        $(".progress").remove();
        if(type=="img"){
            
            saveImg(data.data);
        }else{
            saveFile(data.data);
        }
     })  
}》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》做者 QQ 2456314589喜歡 關注下吧！！！！