两种预览上传图片方式（无限上传)

1, 前言####

市场上很多产品都有上传图片的功能，不仅仅如此，还有裁剪图片上传的功能，类似微信公众账号，我不会和你们说，我把微信公众账号网站代码扒下来研究了一遍。

前段时间，公司内部有个项目，需要上传图片还有录音上传，而且是无限上传的那种，我就写了下，我的做法可能不是最好的，但是，目前是我想到的最好的方法。

2, 通过form表单上传多个图片####

我最初的想法是为了兼容IE浏览器就使用form表单的方式来上传表单，但是在此我们要解决三个问题：

• 1，如何解决UI给的上传按钮是图片的问题？在IE中必须鼠标点击的对象是Input[type="file"]
  控件才能触发 change事件

• 2，如何解决无限上传？

• 3，如何提前预览图片？

  我的解决办法:

• 1, 把Input[type="file"]的文件做定位，并覆盖在图片按钮上，给其高度和宽度，并且透明度为 0

  html:

    		<button>预览图片上传</button>
    		<input type="file" accept="image/png,image/gif"  class="input-file-selectorImg" name="uploadPoster[]">
  

  css:

    		.btn-warp input[type='file']{
    			opacity: 0;
    			position: absolute;
    			left : 0px;
    		}
  

• 2, 无限上传，我把当前触发过 change 事件的Input[type="file"]控件，给插入到隐藏的 div 中，并生成一个新的控件 ，到以前的位置上。

    		var cloneSlef = function( target ){
    			 target.append( this )
    		}
  
    		var getInputHtml = function(){
  
    			return '<input type="file" accept="image/png,image/gif" class="input-file-selectorImg" name="uploadPoster[]">'
    		}
  
    		var createInputFile = function( ){
  
    			var inputHtml = getInputHtml()
    			$(this).before( inputHtml )
    		}
  

• 3, 上传之前预览图片，我们要借用 window.URL.createObjectURL() 方法，把 Input[type="file"] 获得的 file 对象, 转成 blob 数据。

    		dataUrl = windowUrl.createObjectURL( fileObj.files[0] );
  

  之后，把得到的数据给 img 对象，最后，把img对象插入到指定的目标。

    		var imgObj = $('<img>');
  
    		imgObj.attr('src', dataUrl);
  
    		return imgObj
  

3, 模拟form表单对象上传图片

使用 Form 对象来模拟表单，只需要把上面的第二个问题的解决办法修改下：

把上传之前得到的 图片 Blob 数据保存，等到使用的时候，append() 到表单对象中。

				var appendImgDataToFormData = function( imgDatas ){
					var i = 0,
						imgData;
					for( ; imgData = imgDatas[i++]; ) {
						this.add( 'picture[]', imgData );
					}
	
				}

不过，此方法没经过测试，不知道是否能上传多个

文献

http://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/

http://www.ruanyifeng.com/blog/2012/08/file_upload.html

https://developer.mozilla.org/en-US/docs/Web/API/FormData

https://github.com/mattdiamond/Recorderjs