在当今的网络世界中,用户上传文件的方式已经发生了巨大的变化。传统的上传方法需要用户通过表单提交文件,然后等待页面重新加载以查看上传结果。这种方式不仅效率低下,而且用户体验也不佳。随着HTML5和JavaScript的发展,现在有了更多高效且用户友好的文件上传方法。
在早期,人们通常会创建一个简单的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服务器,这使得控制要上传的文件类型、验证要上传的最大文件大小以及其他特定验证更容易在客户端处理,使用户能够快速执行上传任务。