【juincen】Web中图片上传处理 jQuery+Ajax+SpringMVC

转载于 2017-08-20 09:45:06 发布 · 272 阅读

本文介绍了一个简单的图片预览功能实现方法。通过HTML和JavaScript结合，在用户选择图片后即可实时预览所选图片，无需上传即可查看效果。

今天做项目有个需求，页面上需要上传一个图片，之前解决了一次，没有记下来。

在前台用户先选择一张图片，然后可以预览，再上传，我是这样解决的。

预览：

html里面有一个普通的input标签，id：uploadFile

<input type="file" id="uploadFile" />

还有一个可以预览的img标签，这个img现在并没有src属性，id：imgpreview

<img width="100" height="100" id="imgpreview" />

然后在js里面监听这个input的change事件（当选择了图片之后出发）

/**
* 选择文件后出发执行
*/
$('#uploadFile').change(function () {

        // 获取FileList的第一个元素
        var f = document.getElementById('uploadFile').files[0];
        var src= window.URL.createObjectURL(f);
        $("#imgpreview").attr("src",src);
        console.log(src);//看看这个可以浏览的是个什么东西
});