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
喜欢 关注下吧！！！！