// 單張上傳照片
html：
<div class="azwoo"></div>
<div class="azwot">
<input type="file" name="" class="fileinput13" data-id="9" multiple="multiple">
<span>選擇圖片</span>
</div>
JS代碼：
解釋：我們再看這行代碼的背景，HTML5支持multiple屬性，即<input type="file">可能會添加multiple屬性並賦值：multiple="multiple"，
即<input type="file" multiple="multiple">，這樣一次性可同時上傳多張圖片，所以獲得一張圖片的方法就是：$('xx')[0].files[0]
$(" .fileinput13").change(function () {
var file = this.files[0];
readFile(file,$(this).parent().siblings(".azwoo"));
image_id=$(this).attr("data-id");
});
var on =document.querySelector(".azwoo");
//發請求開始
function readFile(file,element) {
// 新建閱讀器
var reader = new FileReader();
// 根據文件類型選擇閱讀方式
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
reader.readAsDataURL(file);
break;
};
// 當文件閱讀結束后執行的方法
reader.addEventListener('load',function () {
// 如果說讓讀取的文件顯示的話 還是需要通過文件的類型創建不同的標簽
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
var img = document.createElement('img');
img.src = reader.result;
console.log(image_id+img.src);
element.append(img);
element.show();
$.ajax({
type:"post",
url:"http://192.168.0.171:8080/WSHD/jiekou7/ADImage",
dataType:"json",
data:{
image:img.src,
style:4,
id:image_id
},
success:function(res){
console.log("上傳成功！！！！！！！！！");
}
});//請求結束
break;
}
});
};//readFile函數結束