ajax上传图片

来源:互联网 发布:java date format 编辑:程序博客网 时间:2024/06/06 08:41
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);} })  }