$('#upload').on('change', function (e, tag) {
var fileList = this.files;
var reader = new FileReader();
//获取第一张图片,读取文件转base64
reader.readAsDataURL(fileList [0]);
reader.onload = function () {
//用户上传的图片
$("预览图片的元素").attr('src',this.result)
};
})
以上是将图片转为base64编码形式进行预览,并未将图片上传至服务器;
若需要将图片传至后台,也可以将file文件转为formData形式后,通过ajax将文件传输到服务器上:
$('#upload').on('change', function (e, tag) {
var fileList = this.files;
let formData = new FormData(); // 创建form对象
formData.append('file', fileList[0]); // 通过append向form对象添加第一张图片数据
$.ajax({
url: "...", //请求的接口地址
type: 'POST',
cache: false, //上传文件不需要缓存
data: formData,
processData: false, // 不要去处理发送的数据
contentType: false, // 不要去设置Content-Type请求头
async: false,
success: function(data){
//换取到图片的服务器地址
$("预览图片的元素").attr('src',data.data.src);
},
error: function(err){
console.log(err)
}
})
})