HTML5应用之文件上传
|
副问题[/!--empirenews.page--]
恒久以来，开拓者们一向为此苦恼，大部门为办理这个题目都回收了flash作为办理方案，但flash并非灵丹灵药，由于flash版本，分裂造成的题目偶然反倒成为了恶梦。有些网站则回收了form标签的enctype=multipart/form-data属性，但这一属性要求处事器作出非凡的配置才气够表现进度，并且自己也较量伟大，伟大就意味着轻易呈现错误，这可不是我们想要的。 此刻我们来看看Html5为什么可以或许办理这个题目，以及，它到底能做的多好。 用HTML5上传文件 在HTML5尺度中，XMLHttpRequest工具被从头界说，被称为“XMLHttpRequest Level 2”，个中包括了以下5个新特征： 1、支持上传、下载字节约，好比文件、blob以及表单数据 2、增进了上传、下载中的进度变乱 3、跨域哀求的支持 4、应承发送匿名哀求（即不发送HTTP的Referer部门） 5、应承配置哀求的超时 在这篇教程中，我们首要存眷第一和第二项特征，尤其是第二项——它可以或许提供我们想要的上传进度。和之前的方案差异，这个方案并不要求处事器作出非凡的配置，因此各人边看教程就可以边下手试试了。
上面图示的就是我们可以或许实现的内容： 1、表现上传的文件信息，好比文件名、范例、尺寸 2、一个可以或许表现真实进度的进度条 3、上传的速率 4、剩余时刻的估算 5、已上传的数据量 6、上传竣事后处事器返回的相应 其它，依附XMLHttpRequest，我们的上传进程整个都是异步的，因此用户在上传文件的时辰，依然可以操纵网页傍边的其余元素，并不必要专门守候上传的完成。而在上传竣事后，我们可以或许获取处事器发回的相应，因此整个上传进程都显得相等顺理成章。 HTML5的进度变乱 HTML5傍边新增了一个进度变乱（Progress Events），这个变乱为我们提供了以下信息： 1、total – 文件巨细 2、loaded – 已上传的巨细 3、lengthComputable – 进度是否可计较 信息并不多，可是在计较文件进度上已经足够了。虽然，也尚有许多对象它没有直接给出，这很是遗憾。 HTML 与平凡的文件上传代码并没有太大差别。不外留意，input标签关联了一个JavaScript函数在onchange上。 <!DOCTYPE html> <html> <head> <title>行使XMLHttpRequest上传文件</title> </head> <body> <form id="form1" enctype="multipart/form-data" method="post" action="upload.php"> <div class="row"> <label for="fileToUpload">Select a File to Upload</label> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> </div> <div id="fileName"></div> <div id="fileSize"></div> <div id="fileType"></div> <div class="row"> <input type="button" onclick="uploadFile()" value="Upload" /> </div> <div id="progressNumber"></div> </form> </body> </html> JavaScript 一旦我们在HTML中行使了input，我们就可以在JS代码中获取到一个FileList工具。这个工具是HTML5中新增进的文件API中的一部门，每一个FileList工具都是一组文件工具的荟萃，而文件工具则拥有下列的属性： 1、name – 文件名（不包括路径） 2、type – 文件的MIME范例（小写） 3、size – 文件的尺寸（单元为字节） 这正是我们所必要的。虽然，HTML5中尚有一个FileReader工具，但在这里我们并没有效它。此刻，通过上面的三个内容，我们已经可以或许节制用户上传的文件巨细和文件范例，以便减轻处事器再次检测时的压力，并晋升安详系数。 function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name; document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; document.getElementById('fileType').innerHTML = 'Type: ' + file.type; } } 那么当用户选择好文件，点击上传之后，又将产生什么呢？ function uploadFile() { var xhr = new XMLHttpRequest(); var fd = document.getElementById('form1').getFormData(); /* event listners */ xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); /* Be sure to change the url below to the url of your upload server side script */ xhr.open("POST", "upload.php"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
