基于jquery实现图片上传本地预览功能

大佬教程收集整理的这篇文章主要介绍了基于jquery实现图片上传本地预览功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的，如果网速慢或图片有问题，这样不但浪费客户时间同时也浪费服务器资源了，下面我们介绍利用js上传图片时本地实现预览，希望此方法对各位有所帮助哦。

一、原理

分为两步：

当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL（对象URL）；

把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

在这里，我们需要了解Javascript里File对象、Blob对象和window.URl.createObjectURL()方法。

1、File对象

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

下面来看获取FileList对象：

<input id="upload" type="file">
<img id="preview" src="">

<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getelementbyid('upload').files[0]);
});

大佬总结

以上是大佬教程为你收集整理的基于jquery实现图片上传本地预览功能全部内容，希望文章能够帮你解决基于jquery实现图片上传本地预览功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。