HTML5开发笔记：图片上传预览

我们知道通过<input type="file">可以用来进行一个图片或者文件的上传，然而浏览器自带的一个缩略图预览的功能其实是相当不美观的，很多时候我们希望可以在上传图片之前对自己上传的图片进行一个预览，早些年我们会通过这个input上关联一个onchange的事件，然后通过ajax来进行一个图片的上传后，在回调的js函数中更新掉图片的路径来达到预览的效果。然而H5给到我们一个更好的解决方案，通过纯js的操作来调用出这张“准备”上传的图片：

<form>

    <input type="file" id="a" onchange="add_img()">

    <img src="" id="b">

</form>

<script>

    function add_img(){

        var docObj=document.getElementById('a');

        f = window.URL.createObjectURL(docObj.files[0]);

        document.getElementById('b').src=f;

    }

</script>

这个轻量级的js可以替代我们以前繁琐的ajax来进行一个图片预览的功能，最终在服务器接收端获取图片并进行保存。

巴特西

HTML5开发笔记：图片上传预览

最新文章

热门文章