http://www.jb51.net/article/114003.htm

一、基於input 方式formData上傳檔案和資料：

<divclass="startleft describebox"> <labelclass="title">商品描述</label>       </divclass="startleft"> <textareaclass="describeinfo"v-model="goodsinfo"></textarea> <divclass="startleft"> <labelclass="title">單價:</label> <inputclass="noborder"placeholder="請輸入單價"v-model="price"> </div> <divclass="startleft"> <labelclass="title">數量:</label> <inputclass="noborder"placeholder="請輸入數量"v-model="number"> </div> <divclass="startleft"> <labelclass="title">聯絡電話:</label> <inputclass="noborder"placeholder="請輸入手機號"v-model="phone"> </div> <divclass="startleft"> <labelclass="title">地址:</label> <inputclass="noborder"placeholder="請輸入地址"v-model="address"> </div> <divclass="startleft"> <labelclass="title">圖片</label> <imgsrc=""> <imgsrc="">      </div>      <divclass="addimg"> <divclass="imgbox"> <imgclass="goodsimg"src="../../assets/addimg.png"> <inputid="file"type="file"class="fileupload"accept="image/*"multiplecapture="camera"@change="viewimg()"/> </div> <divclass="imgbox"> <imgclass="goodsimg"src="../../assets/addimg.png"> <inputtype="file"class="fileupload"accept="image/*"capture="camera"@change="viewimg()"/> </div> </div> </div> var formData = new FormData(); varinputs = $("input.fileupload");        //input  .fileupload 有多個該className的input元素 for(vari = 0; i < inputs.length; i++) { varfile = inputs[i]; if(inputs[i].files[0]) {                  //inputs[i]對應某一個input元素， inputs[i].files為獲取的檔案list,                                                                              //inputs[i].files[0]為獲取的第一個檔案 formData.append("file", file.files[0], file.files[0].name); } } formData.append('barterCommodityname', _self.goodsname); formData.append('barterSellingprice', _self.price); formData.append('barterContactinformation', _self.phone); formData.append('barterCommodityquantity', _self.number); formData.append('barterCommodityaddress', _self.address); formData.append('barterDescriptioninform', _self.goodsinfo); formData.append('barterCategoryid', _self.goodstype); var_self =this; $.ajax({ type:'POST', dataType:"json", data: formData, processData:false, contentType:false, success:function(data) { console.log(data); if(data.code == 200) { console.log("success"); // _self.$router.push('/'); }else{ alert(data.message); } } }); http://www.jb51.net/article/89998.htm
<form name="form1"id="form1"> <input id="file"type="file"name="name"></input> </form>

<script type="text/javascript"> varform=document.getElementById("form1"); varformdata=newFormData(form); </script> </body> </html>

可以在已有表單資料的基礎上，繼續新增新的鍵值對

?

1 2	var formdata=new FormData(); formdata.append ("age","21");

使用FormData物件上傳檔案

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var formdata=new FormData($("#form1").[0]);//獲取檔案法一 //var formdata=new FormData( ); //formdata.append("file" , $("#file")[0].files[0]);//獲取檔案法二 $.ajax({ type :'post', url :'#', data : formdata, cache :false, processData :false,// 不處理髮送的資料，因為data值是Formdata物件，不需要對資料做處理 contentType :false,// 不設定Content-type請求頭 success :function(){} error :function(){ } })

二、基於多個<img  src="xxxx"/> 方式FormData上傳圖片 <div class="z_photo upimg-div clear"> <section class="up-section fl"><span class="up-span"></span> <img class="close-upimg" src="../../images/a7.png"> <img class="up-img" src="blob:null/d5bb33e8-60cb-492b-bcb1-f5efc37fdaa8"> <p class="img-name-p">Jellyfish.jpg</p> <input id="taglocation" name="taglocation" value="" type="hidden"> <input id="tags" name="tags" value="" type="hidden"></section> <section class="up-section fl"><span class="up-span"></span><img class="close-upimg" src="../../images/a7.png"><img class="up-img" src="blob:null/f3c1d231-d21c-4601-9db0-2a27f910d9ae"> <p class="img-name-p">Hydrangeas.jpg</p><input id="taglocation" name="taglocation" value="" type="hidden"><input id="tags" name="tags" value="" type="hidden"></section> <section class="up-section fl"><span class="up-span"></span><img class="close-upimg" src="../../images/a7.png"><img class="up-img" src="blob:null/8969dc3e-4ed6-4f13-8d7e-fd17a6f60030"> <p class="img-name-p">Desert.jpg</p><input id="taglocation" name="taglocation" value="" type="hidden"><input id="tags" name="tags" value="" type="hidden"></section> <section class="up-section fl"><span class="up-span"></span><img class="close-upimg" src="../../images/a7.png"><img class="up-img" src="blob:null/a64c1ef0-319c-4a1d-af7d-6d256e4a9b65"> <p class="img-name-p">Chrysanthemum.jpg</p><input id="taglocation" name="taglocation" value="" type="hidden"><input id="tags" name="tags" value="" type="hidden"></section>
<section class="z_file fl">
<img src="../../images/a11.png" class="add-img">
<input name="file" id="file" class="file1 valid" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="" aria-invalid="false" type="file">
</section>
上傳已經預覽中的圖片到伺服器：

var imgLen = $("img[class=up-img]").size();
var imgurl = "xxx/upload";
var imgArray = [];
var imgCount = 0;
for(var k=0; k <imgLen; k++){
    var ff = $("img[class=up-img]")[k]                    //獲取img圖片物件
    var base64Data = getBase64Image(ff)                   //img轉Base64
    var blobs = dataURItoBlob(base64Data)                 //Base64轉Blob物件
    var ffName = $("p[class=img-name-p]")[k].innerHTML   //獲取img名稱
var imgdata = new FormData();
imgdata.append('file', blobs, ffName)            
    $.ajax({
        headers: {
        },
url:imgurl,
type:"post",
data:imgdata,
processData:false,
contentType: false,
success:function(result){

}else{
        alert(result.ret);
}
},
error:function(e){
    alert("錯誤！！");
}

將本機圖片點選input預覽出來：

/*點選圖片的文字框*/
$(".file1").change(function(){
    var idFile = $(this).attr("id");
var file = document.getElementById(idFile);     //input元素
var imgContainer = $(this).parents(".z_photo"); //存放圖片的父親元素
var fileList = file.files; //獲取的圖片檔案
var input = $(this).parent();//文字框的父親元素
var imgArr = [];
//遍歷得到的圖片檔案
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length;  //總的數量
if(fileList.length > 10 || totalNum > 10 ){
        alert("上傳圖片數目不可以超過10個，請重新選擇");  //一次選擇上傳超過5個 或者是已經上傳和這次上傳的到的總數也不可以超過5個
}
    else if(numUp < 10){
        fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
            var imgUrl = window.URL.createObjectURL(fileList[i]);
imgArr.push(imgUrl);
var $section = $("<section class='up-section fl loading'>");
imgContainer.prepend($section);
var $span = $("<span class='up-span'>");
$span.appendTo($section);
var $img0 = $("<img class='close-upimg'>").on("click",function(event){
                event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.attr("src","../../images/a7.png").appendTo($section);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
$input.appendTo($section);
var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
$input2.appendTo($section);
}
    }

img轉Base64, Base64轉Blob

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctxx = canvas.getContext("2d");
ctxx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL // return dataURL.replace("data:image/png;base64,", "");
}


function dataURItoBlob(base64Data) {
    var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
}
    return new Blob([ia], {type:mimeString});
}

三、上傳進度條顯示：

http://www.jb51.net/article/74264.htm

<body> <img width="400"height="250"/><br /> <input type="file"id="pic" name="pic" onchange="showPic()"/> <input type="button"value="上傳圖片" onclick="uploadFile()" /><br /> <div id="parent"> <div id="son"></div> </div> </body>

#parent {
   width: 300px;
height: 20px;
background-color: #fff;
border: 1px solid #000;}
#son{
   height: 18px;
background-color: #2cc120;
text-align:center;
}

$.ajax({
    headers: {
        /*"Accept": "application/json",*/
        /*"Content-Type":"application/json;charset=UTF-8"*/
},
url:url,
type:"post",
data:data,
/*dataType: 'json',*/
processData:false,
contentType: false,
xhr: function(){
        var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
            xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
    },
success:function(result){
        alert(111)
        if (result.msg == "新增應用成功") {
            $("#addTempl-modal").modal('hide');
toastr.success("新增應用成功!");
action.loadPageData();
$("#iconShow").empty();
$("#imgShow").empty();
}else{
            alert(result.msg);
}
    },
error:function(e){
        alert("錯誤！！");
}
});

function onprogress(evt){
    var loaded = evt.loaded;     //已經上傳大小情況
var tot = evt.total;      //附件總大小
var per = Math.floor(100*loaded/tot);  //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}