JQ实现上传图片在线预览,不经过后台,后台使用表单上传

html表单结构
<input type="file" class="id-input-file" name="file_url[]">
<img class="middle" src="">
JS部分
//jq上传图片在线预览
$(function () {
$(document).on('change', '.id-input-file', function () {
var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径
console.log(objUrl);
if (objUrl) {
$(this).siblings('.middle').attr("src", objUrl); //将图片路径存入src中,显示出图片
}
});
});

//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}

posted on 2018-01-31 17:20  guoke1970s  阅读(291)  评论(0编辑  收藏  举报

导航