js处理文件上传慢造成的用户体验问题

在网速慢的情况下解决文件上传慢造成用户体验差的问题，我这里实践的方案有三种：

1. 前端使用ajax  的方式异步把文件上传到服务端，然后服务端再对文件读写进行异步IO. 比如可以使用queue or asyc job or schedual，这样前端能有较快的响应。
2. 前端使用js对文件进行encode转码，把文件转成字符进行提交，后端在进行decode and IO. 这种方式比如使用base64, 但是base64 encode to string 可能有时候字符串会比较长，可能会超过一些应用服务器的IO大小设置。
3. 最近发现第三种方式可以更好的体验：plupload, http://www.plupload.com/,这是使用flash or sliverlight和HTML5特性做的上传插件，实质还是对文档进行了转码处理
4. 在不考虑浏览器兼容性的情况下，还可以使用html5的file  readAsArrayBuffer  or 使用Btoa

js encode file code :

 

<div>
    <div>
        <label for="filePicker">Choose or drag a file:</label><br>
        <input type="file" id="filePicker">
    </div>
    <br>
    <div>
        <h1>Base64 encoded version</h1>
        <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>
    </div>
</div>
<script>
var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);
    }
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filePicker').addEventListener('change', handleFileSelect, false);
} else {
    alert('The File APIs are not fully supported in this browser.');
}
</script>

rel:http://jsfiddle.net/eliseosoto/JHQnk/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
另外，参考代码：

$(document).ready(function($) {
    $.extend( true, jQuery.fn, {        
        imagePreview: function( options ){          
            var defaults = {};
            if( options ){
                $.extend( true, defaults, options );
            }
            $.each( this, function(){
                var $this = $( this );              
                $this.bind( 'change', function( evt ){

                    var files = evt.target.files; // FileList object
                    // Loop through the FileList and render image files as thumbnails.
                    for (var i = 0, f; f = files[i]; i++) {
                        // Only process image files.
                        if (!f.type.match('image.*')) {
                        continue;
                        }
                        var reader = new FileReader();
                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                    $('#imageURL').attr('src',e.target.result);                         
                            };
                        })(f);
                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }

                });
            });
        }   
    });
    $( '#fileinput' ).imagePreview();
});

 

 以上方案，仅供参考，欢迎讨论

评论

1 楼 alec03711 2014-07-02