【html5 图片上传版本1.0】的更多相关文章

html5 图片上传版本1.0

1.代码如下: /* autor:shzihouyu date:2015-12-11 ver:1.0 */ var szyFile = { fileDom:null,//html 文件上传控件 preview:null,//图片预览的区域 imgMaxSize:0,//图片大小 filterDom:[],//符合条件的元素 filterImgDataUrl:[],//图片的dataUrl数据 dragArea:null,//拖放区域 imgRegExp:function(f){ if(!/\.(…

HTML5 图片上传预览

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="author" content="EdieLei" /> <title>HTML5 图片上传预览</title> <script type="text/javascrip…

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). v1.4版本已支持秒传+分片上传+断点续传(IE10+.其它标准浏览器),具体请参考Github代码. 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起…

Jquery插件-Html5图片上传并裁剪

/** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:function(elementHeader,element){elementHeader.onmousedown=Drag.start;elementHeader.obj=element;if(isNaN(parseInt(element.style.left))){element.style.le…

HTML5图片上传预览

HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. 也就…

HTML5图片上传本地预览

在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File API 获取图片. var input = document.createElement('input'); input.type = 'file'; input.addEventListener('change', function() { var file = this.files[0]; }…

[javascript]——移动端 HTML5 图片上传预览和压缩

在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象. 通常情况我们这样使用它:…

基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

(function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(this); var $clone = $this.clone(); var settings = $.extend({ id : $this.attr('id'), button:$this, uploader : '', formData:{}, auto : true, fileTypes : '*…

html5 图片上传 预览

<html><body><fieldset> <legend>测试</legend> <div class="form-group"> <div class="img-preview rl"> <form id="index_form1" name="index_form1" role="form" method=&q…

html5图片上传时IOS和Android均显示摄像头拍照和图片选择

最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为<input type="file" capture="camera">后,Android可显示相机和文档,但IOS则只有拍照选项了,最后通过判断设备类型使在IOS和Android下均可以显示拍照和图库选择,代码如下: var u = navigator.u…