在网速慢的情况下解决文件上传慢造成用户体验差的问题,我这里实践的方案有三种:
- 前端使用ajax 的方式异步把文件上传到服务端,然后服务端再对文件读写进行异步IO. 比如可以使用queue or asyc job or schedual,这样前端能有较快的响应。
- 前端使用js对文件进行encode转码,把文件转成字符进行提交,后端在进行decode and IO. 这种方式比如使用base64, 但是base64 encode to string 可能有时候字符串会比较长,可能会超过一些应用服务器的IO大小设置。
- 最近发现第三种方式可以更好的体验:plupload, http://www.plupload.com/,这是使用flash or sliverlight和HTML5特性做的上传插件,实质还是对文档进行了转码处理
- 在不考虑浏览器兼容性的情况下,还可以使用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、文件上传使用增强的FTP协议,用户使用浏览器就可以上传超大文件到服务器(支持上传超过1G的文件)。 2、支持断点续传,系统智能续传未上传的文件,续传操作更简单,更方便,更快捷。 3、支持文件批量上传, 一次可以...
使用本组件可以轻松将几G文件上传到服务器,良好的兼容性和通用的接口,可以直接与您的系统整合或对接,大大缩短整个系统的开发时间,降低系统的开发成本,提高产品的质量和用户体验。 二、组件特点: 1. 支持在线...
很多网站都在为提升用户体验而努力,想尽多种办法让用户在网站上的操作更加舒适、人性化,就像这个图片预览小功能一样,不要说它很小,但是它发挥的作用很明显,在上传前预览一下图片,以免选择了错误的文件,上次写...
该系统利用Spring Boot和JavaScript等技术进行开发,实现了文件上传下载、在线预览、权限管理等功能,旨在为用户提供安全、便捷的云端文件管理体验。 以下是个人云盘管理系统的主要功能: 1. **文件上传与管理**:...
文件上传是我们开发网站程序时经常遇到的功能,选择一个功能强大,使用简单的上传插件可以节省我们很多开发时间,下面就为大家介绍5个不错的javascript文件上传插件 这篇文章的资源均来自...
这里我提出三点有关异步文件上传的方式。 使用第三方控件,如Flash,ActiveX等浏览器插件上传。 使用隐藏的iframe模拟异步上传。 使用XMLHttpRequest2来实现异步上传。 第一种使用浏览器插件上传,需要一定的...
(商用请联系作者获取授权,个人用户无限制) 简介 FTP Manage Tools(FTP管理工具)是一个基于WEB的FTP客户端程序,你可以通过它对你的FTP文件进行管理。 程序采用AJAX,由PHP JQuery/JavaScript完成。 ...
现在大部分的用户有文件批量上传的需求,希望只通过点击一次鼠标就能够批量的上传多张图片,而不是一张张的选择文件上传,这样操作即浪费时间又非常烦琐。 近年来,由于数码和影视行业的迅猛发展刺激了用户对大文件...
在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了。ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手。 ...
使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。 不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现。 例如ie7/ie8的...
我们得到的上传进度并不是理想连续的,如想获得更好的用户体验,需要在客户端用JS作进一步处理。 在写这篇文档的时候,各空间商们基本没有采用版本5.2.0,文件异步上传只能使用一个折中的解决方式。此前真正的异步...
fastdfs基于http协议的分布式文件系统源码,基于go和js,它具有高性能、高可靠、无中心、免维护等优点。 ### 大家担心的是这么简单的文件系统,靠不靠谱,可不可以用于生产环境?答案是肯定的,正因为简单所以高效...
- 文件上传失败检测 - 树目录同步优化 ###ver2.5 `2014/6/15` ---- ####update: - 增加创建副本功能 按住ctrl拖拽即可,可以到当前,也可以到文件夹。 - 多选拖拽优化:剪切到、移动到某个文件夹 - 创建副本...
该系统采用前后端分离的开发模式,前端使用JavaScript进行页面渲染与交互,后端基于Spring Boot框架搭建RESTful API,实现文件上传、下载、删除、预览等功能。在系统设计上,充分考虑了用户体验与数据安全性,采用了...
文件上传如果加上进度条会有更好的用户体验(尤其是中大型文件),本文使用 Nodejs 配合前端完成这个功能。 前端我们使用 FormData 来作为载体发送数据。 效果 前端部分 HTML 部分 和 Js 部分 <input type=...
multifile, jQuery多文件选择插件 jQuery多文件...多文件) 是一个非侵入和关键 jQuery jQuery jQuery帮助你的用户轻松选择多个文件上传。它帮助你实现基本接口,以改善用户的文件选择体验,同时提供了 3种简单的验证方
该资料包采用了标准的 JSP 技术,通过结合 HTML、CSS 和 JavaScript 等前端技术,实现了用户友好的界面和流畅的操作体验。在功能方面,JSP Explorer 文件浏览器提供了文件的上传、下载、预览、删除等基本操作,同时...