上传文件jsweb前端（包含文件格式限制）资源-CSDN下载

共14个文件

html：5个

gif：4个

htm：2个

4星 · 超过85%的资源需积分: 48 125 浏览量 2011-10-17 15:42:47 上传评论收藏 27KB ZIP 举报

在前端开发中，文件上传是一项常见的功能，尤其在构建交互性强的Web应用时不可或缺。"上传文件jsweb前端（包含文件格式限制）"这个项目旨在提供一个完整的前端文件上传解决方案，它不仅支持基本的文件上传操作，还包含了对文件格式和大小的严格限制，以确保用户上传的数据符合预设的标准，类似于163网盘的文件上传体验。下面将详细探讨这个项目涉及的关键知识点。 1. **HTML5 File API**：这个项目基于HTML5的File API，这是一个强大的工具集，允许JavaScript直接操作用户选择的文件。File API提供了File对象，用于读取、操作和上传文件，以及FormData对象，用于发送文件数据到服务器。 2. **文件选择事件**：通过`<input type="file">`标签，我们可以让用户选择要上传的文件。结合`change`事件，可以在用户选择文件后立即进行处理，如验证文件类型和大小。 3. **文件格式限制**：项目中通过检查File对象的`type`属性来判断文件类型，比如限制只能上传图片或文档等。同时，可以使用`accept`属性在文件选择对话框中预设可选的文件类型。 4. **文件大小限制**：通过File对象的`size`属性获取文件大小，然后与预设的大小限制进行比较。如果超过限制，可以提示用户并阻止上传。 5. **模拟进度条**：为了提升用户体验，项目可能采用了AJAX异步上传，同时更新一个进度条显示上传进度。这通常涉及到监听`progress`事件，并根据`loaded`和`total`属性计算进度。 6. **预览功能**：对于图像文件，项目可能提供了预览功能，通过FileReader的`readAsDataURL`方法将文件内容转换为Base64编码的URL，然后显示在页面上。 7. **错误处理**：良好的错误处理机制是必要的，例如处理网络中断、服务器返回错误码等情况。可以通过捕获Promise的`catch`块或者监听`error`事件来实现。 8. **JavaScript和jQuery**：虽然标签中提到了"js"和"javascript"，但没有明确是否使用了jQuery。如果使用了jQuery，它可以帮助简化DOM操作和事件处理，使得代码更简洁。 9. **异步上传和FormData**：在上传文件时，通常使用XMLHttpRequest或Fetch API创建异步请求，将文件数据包装在FormData对象中发送到服务器。 10. **跨域资源共享(CORS)**：如果服务器和前端不在同一个源下，需要设置CORS策略以允许跨域文件上传。以上就是"上传文件jsweb前端（包含文件格式限制）"项目中涉及的主要技术点和知识点。通过这些技术，开发者可以创建一个功能齐全、安全可控的文件上传系统，为用户提供便捷的文件管理体验。

资源推荐

资源详情

资源评论

收起资源包目录

文件上传.zip （14个子文件）

文件上传

FileUpload2

img

fu_btn.gif 1KB

loading.gif 778B

file

FileUpload.htm 10KB

File.ashx 1KB

FileUpload.rar 7KB

picsize.html 2KB

geshi.html 2KB

upload.html 2KB

picsize2.html 758B

FileUpload

img

tousu_add.png 1KB

fu_btn.gif 1KB

loading.gif 778B

file

FileUpload.htm 8KB

upload1.html 4KB

<html> <head> <title>测试</title> <script type="text/javascript" language="javascript"> function test() { if (document.all.TextDes) { for (i = 0; i < document.getElementsByName("TextDes").length; i++) { if (document.getElementsByName("TextDes")[i].value.length == 0) { alert("文档简介不能为空"); document.getElementsByName("TextDes")[i].focus(); return false; } if (document.getElementsByName("FileUpload")[i].value.length == 0) { alert("请选择文件"); document.getElementsByName("FileUpload")[i].focus(); return false; } } return true; } else { return false; } } function getDes() { var des = ""; if (document.all.TextDes) { for (i = 0; i < document.getElementsByName("TextDes").length; i++) { des = des + document.getElementsByName("TextDes")[i].value + ','; } } alert(des); return des; } function getType() { var type = ""; if (document.all.TextDes) { for (i = 0; i < document.getElementsByName("DocType").length; i++) { type = type + document.getElementsByName("DocType")[i].value + ','; } } alert(type); return type; } function insert_row(){ R=filetable.insertRow(filetable.rows.length); C=R.insertCell(R.cells.length) ; C.innerHTML="文档简介*"; C.align="right"; C=R.insertCell(R.cells.length); C.align="left"; C.innerHTML='<input name="TextDes" type="text"/>'; C=R.insertCell(R.cells.length); C.align="right"; C.innerHTML='<input type="button" value="×" onclick="delete_row(this)" />'; R=filetable.insertRow(filetable.rows.length); C=R.insertCell(R.cells.length) ; C.innerHTML="文档类型*"; C.align="right"; C=R.insertCell(R.cells.length); C.align="left"; C.innerHTML = '<select name="DocType"><option value="文档模板">文档模板</option><option value="规章制度">规章制度</option> </select>'; R=filetable.insertRow(filetable.rows.length); C=R.insertCell(R.cells.length) ; C.innerHTML="选择文档*"; C.align="right"; C=R.insertCell(R.cells.length); C.align="left"; C.innerHTML='<input name="FileUpload" type="file"/>'; R=filetable.insertRow(filetable.rows.length); C=R.insertCell() ; C.innerHTML='<hr />'; C=R.insertCell() ; C.innerHTML='<hr />'; C=R.insertCell() ; C.innerHTML='<hr />'; } function delete_row(obj) { var pr = obj.parentNode.parentNode.parentNode; pr.deleteRow(obj.parentNode.parentNode.rowIndex+1); pr.deleteRow(obj.parentNode.parentNode.rowIndex+1); pr.deleteRow(obj.parentNode.parentNode.rowIndex+1); pr.removeChild(obj.parentNode.parentNode); } </script> </head> <body> <div align="center"> <table border="0" width="60%" cellspacing="0" cellpadding="0" id="filetable"> <tr> <td align="right">文档简介*</td> <td align="left"><input name="TextDes" type="text"/></td> <td align="right"><input type="button" value="×" onclick="delete_row(this)" /></td> </tr> <tr> <td align="right">文档类型*</td> <td align="left"><select name="DocType"><option value="文档模板">文档模板</option><option value="规章规度">规章制度</option> </select></td> </tr> <tr> <td align="right">选择文件*</td> <td align="left"><input name="FileUpload" type="file"/></td> </tr> <tr> <td><hr /></td> <td><hr /></td> <td><hr /></td> </tr> </table> <input type="button" value="增加附件" name="addatach" onclick="insert_row()" /> <input type="button" value="取值" name="getvalue" onclick="test()" /> <input type="button" value="get" name="get" onclick="getType()" /> </div> </body> </html>

评论收藏

内容反馈