前端的代码如下
<div class="col-sm-9">
<input type="hidden" name="checkpic" id="checkpic" value="/data/upload/2017-03-31/58de2a48105a1.jpg">
<input type="hidden" name="oldcheckpic" id="oldcheckpic" value="nopic">
<input type="hidden" name="oldcheckpicname" id="oldcheckpic" value="/data/upload/2017-03-31/58de2a48105a1.jpg">
<a href="javascript:;" class="file" title="点击选择所要上传的图片">
<input type="file" name="file0" id="file0" multiple="multiple">
选择上传文件
</a>
<a href="javascript:;" onclick="return backpic('/data/upload/2017-03-31/58de2a48105a1.jpg');" title="还原修改前的图片" class="file">
撤销上传
</a>
<div><img src="/data/upload/2017-03-31/58de2a48105a1.jpg" height="70" id="img0"></div>
</div>
jquery
$("#file0").change(function () {
var objUrl = getObjectURL(this.files[0]);
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl);
}
});
当点击上传图片时id=”img0″的图片地址变成了
<div>
<img src="blob:http://www.test.com/b2e75842-608c-4298-932e-4e922bd72d10" height="70" id="img0">
</div>
这样就实现了前端图片上传,在没有上传到服务器端的情况下看到上传图片的功能,具体URL.createObjectURL()的参考,请查看https://developer.mozilla.org…。