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