單圖上傳
<div class="imgUp">
<label>頭像單圖</label>
<input type="file" name='photo' class="mui-input-clear" id='upimg' style="opacity: 0;" >
<img src="images/up.png" alt="" id='imgContent'>
</div>
js
$('#upimg').on('change',function(){ //選中圖片后展示在頁面
var filePath = $(this)[0].files[0].name //獲取到input的value，里面是文件的路徑
//console.log(filePath) //1.png
fileFormat = filePath.split('.')[1].toLowerCase()
//console.log(fileFormat) //png
src = window.URL.createObjectURL(this.files[0]) //轉成可以在本地預覽的格式
//console.log(src) //blob:null/11ea5a2d-7270-4035-b5c4-4e50c5c061e7
// 檢查是否是圖片
if( !fileFormat.match(/png|jpg|jpeg/) ) {
alert('上傳錯誤,文件格式必須為：png/jpg/jpeg')
return
}
$('#imgContent').attr('src',src)
})
多圖上傳
<div class="imgUp1">
<label>詳情頁多圖</label>
<input type="file" class="mui-input-clear" id="upimg1" multiple style="opacity: 0;">
<img src="images/up.png" alt="" id='imgContent1'><br>
<div id="previewImg">
</div>
</div>
js
var fileall = [] //存放圖片的容器
$('#upimg1').on('change', function(){
var imgFiles = $(this)[0].files
for (i=0;i<imgFiles.length;i++){
filePath = imgFiles[i].name
fileFormat = filePath.split('.')[1].toLowerCase()
src = window.URL.createObjectURL(imgFiles[i])
if( !fileFormat.match(/png|jpg|jpeg/) ) {
alert('上傳錯誤,文件格式必須為：png/jpg/jpeg')
return
}
var preview = document.getElementById("previewImg")
var img = document.createElement('img')
img.width = 120
img.src = src
preview.prepend(img)
fileall.push($("#upimg1")[0].files[0])
console.log(fileall)
})
點擊提交或者上傳時
var formData1 = new FormData();
$("#submit").click(function(){
for(var i = 0;i<fileall.length;i++){
formData1.append("img",fileall[i]);
}
formData1.append("photo", $("#upimg")[0].files[0]);
$.ajax({
url: comPageUrl+'/applyVote',
type: 'POST',
async:true,
xhrFields:{
withCredentials:true
},
contentType:false,
processData:false, //這個很有必要，不然不行
dataType:"json",
mimeType:"multipart/form-data",
data: formData1,
success: function(res){
console.log(res)
if(res.status==200){
alert("上傳成功")
}
},
error: function(){
alert('服務器發生錯誤！');
}
})
})
