单图上传
头像单图
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)
})
多图上传
详情页多图
js
var fileall = [] //存放图片的容器
$('#upimg1').on('change', function(){
var imgfiles = $(this)[0].files
for (i=0;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
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('服务器发生错误！');
}
})
})
希望与广大网友互动？？
点此进行留言吧！
