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

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

转载于:https://www.cnblogs.com/zhiyuan-2011/articles/5138807.html