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 :

 

    

        Choose or drag a file:

        
    
    

    

        
Base64 encoded version
        
    



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();
});

 

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

• plupload.zip (143.9 KB)
• 下载次数: 2