HTML5 上传图片预览

html5出现之前如果需要上传图片预览一般都是先上传到服务器然后远程预览

html5出现之后有个filereader 解决了这问题

 //选中图片之后$("#fileAddPic").on('change', function (e) {var files = e.target.files || e.dataTransfer.files;onSelect(files);})//选中图片之后function onSelect(file) {file = file[0];var html = '', i = 0;$("#preview").html('<div class="upload_loading"></div>');var funAppendImage = function () {if (file) {var reader = new FileReader();reader.onload = function (e) {$("#upimgBox").attr('src', e.target.result)}reader.readAsDataURL(file);}};funAppendImage();}

转载于:https://www.cnblogs.com/sxmny/p/3998701.html

HTML5 上传图片预览相关推荐

上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
html元素拖拽预览图,HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blo ...
input file上传图片预览
下载地址http://download.csdn.net/detail/cometwo/9383602 兄弟文章:http://blog.csdn.net/libin_1/article/detail ...
上传图片预览并在后台处理
<a class="a-upload"><input type="file" name="fpic1" onchange= ...
java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片
一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
Java上传图片预览并通过后端压缩
1.前端上传图片预览 <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...
上传图片预览（服务器版）组件
preview v0.1.0 初始版本图片上传预览图片组件. 先来个效果看看: 使用步骤: 1.在web.xml中配置selvelt如下所示 <servlet><descripti ...

HTML5 上传图片预览

HTML5 上传图片预览相关推荐

最新文章

热门文章