现代文件上传技术

在当今的网络世界中,用户上传文件的方式已经发生了巨大的变化。传统的上传方法需要用户通过表单提交文件,然后等待页面重新加载以查看上传结果。这种方式不仅效率低下,而且用户体验也不佳。随着HTML5JavaScript的发展,现在有了更多高效且用户友好的文件上传方法。

传统文件上传方式

在早期,人们通常会创建一个简单的HTML表单,设置其enctype属性,以便用户可以选择文件并点击提交按钮。然后,用户会被带到一个新页面,在那里他们可能会看到“图片已上传”的消息,或者是一个错误消息,告诉他们上传过程中出现了问题。这种方法的问题在于,如果用户上传了5张图片,其中一张出现了错误,那么其余四张图片也会被丢弃,用户需要等待2分钟后重新上传这四张图片。此外,如果连接中断,用户可能会失去耐心。

现代文件上传方式

随着网络技术的发展,现在有很多新的方法可以让用户上传图片或其他文件到服务器,而不需要像90年代那样提交表单。

HTML5出现之前,人们使用隐藏的iframe来上传文件。iframe是嵌入在主HTML文档中的另一个HTML文档,即使导航到其他网页,也不会触发主页面的导航事件。这意味着,如果通过iframe提交表单,用户所在的主页面不会被提交。但是,用户仍然可以查看结果和其他相关数据,如表单元素和结果窗口。

现在,JavaScript足够强大,可以上传文件,使用HTML5可以轻松地进行文件验证。可以管理要上传的文件以及要拒绝的文件。这种方法还最小化了旧方法中可能触发的任何文件错误的机会,用户在上传所有HTTP请求数据后才会收到这些错误的通知。

在这篇博客文章中,将使用jQuery——为什么?因为喜欢jQuery,它的语法更简洁,看起来更酷,但请记住,它比纯JavaScript慢,因为它只是一个在JavaScript上运行的库,但差异几乎可以忽略不计——来发送Ajax请求到服务器,以及想要上传的文件数据。

第一阶段是创建一个HTML表单,该表单将捕获用户想要上传到服务器的任何文件。例如,以下代码是一个HTML表单的示例,它将接受用户上传的文件,并包含一个简单的按钮,用户将使用该按钮上传文件——知道,按钮是一种旧方法,但在这种方法中,这个按钮不会执行内置功能,它将被JavaScript捕获,页面将保持在当前位置,全部使用JavaScript。

<form method="post" id="form" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form>

以上是表单的示例。现在一旦查看jQuery代码,将能够省略enctype="multipart/form-data"部分。在此之前,这个表单——就像它现在这样——将接受一个文件(目前还不允许上传多个文件),上传按钮将用于触发主函数。

$(document).ready(function() { // On the document ready $('input[type=submit]').click(function(event) { // Before the request starts, show the 'Loading message...' $('.result').text('File is being uploaded...'); event.preventDefault(); // On the click event, var formData = new FormData($('#form')[0]); $.ajax({ type: 'POST', processData: false, contentType: false, data: formData, success: function(data) { // The file was uploaded successfully... $('.result').text('File was uploaded.'); }, error: function(data) { // there was an error. $('.result').text('Whoops! There was an error in the request.'); } }); }); });

在上面的代码中,有一个元素用于渲染结果。就像这样:

<p class="result"> </p>

在这个元素中,将显示当前正在进行的过程。首先——它将在这个段落中显示一个“文件正在上传…”的消息。上传完成后,如果文件上传成功,将显示成功提示,否则将向用户显示错误消息。

这是通过代码覆盖的,在事件处理程序中的第二行。event.preventDefault();在这行代码中,将被触发的默认行为被覆盖。这意味着页面不会被POST请求重新加载,相反,只会执行想要的代码——代码块中的Ajax代码。

可以使用以下ASP.NET代码,确保文件附加在请求上,然后继续保存过程等。例如,这段代码:

C# files = Request.Files.Count; if (files > 0) { // Files are sent! for (int i = 0; i < files; i++) { var file = Request.Files[i]; // Got the image... string fileName = Path.GetFileName(file.FileName); // Save the file... file.SaveAs(Server.MapPath("~/" + fileName)); } }

以上代码适用于任何图片或任何文件类型。目前还没有验证,可以根据需要附加自己的验证,例如根据Mime类型或请求中附加的文件大小。

哦,说过了,在jQuery代码之后,会解释如何省略enctype属性——或者如果甚至忘记写enctype,结果也将有效上传文件——是因为当使用FormData对象发送数据时,它使表单表现得好像表单的enctype设置为multipart/form-data(这是编码文件并通过HTTP传输它们所必需的)。这就是为什么,即使遗漏了这部分并且使用了FormData,也会看到图片正在上传到服务器。

HTML5和jQuery是广泛使用的框架,用于通过Ajax请求将文件上传到Web服务器,这使得控制要上传的文件类型、验证要上传的最大文件大小以及其他特定验证更容易在客户端处理,使用户能够快速执行上传任务。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485