限制文件上传，以便只能上传小于1 MB的文件

I came across this question while studying for the Microsoft Web-Application Developer exam,

我在为Microsoft web应用程序开发人员考试学习时遇到了这个问题，

You are implementing a Web page that allows users to upload files to a Web server. The page includes a form that has a Submit button. You want to restrict uploads so that only files smaller than 1 MB can be uploaded.

您正在实现一个允许用户将文件上载到Web服务器的Web页面。页面包含一个有提交按钮的表单。您希望限制上传，以便只能上传小于1 MB的文件。

The answer given was:

给出的答案是:

Add an ASP.NET FileUpload control and configure it to run on the server. Add a server-side OnClick handler to the form's Submit button to save the file only if the file size is allowed

添加一个ASP。NET FileUpload控件并将其配置为在服务器上运行。将服务器端OnClick处理程序添加到表单的Submit按钮，以便仅在允许文件大小的情况下保存文件

But wouldn't this mean that the file would have already been uploaded to the server? and we are just choosing whether to save it or not? Can it be done on the client Side?

但这难道不意味着文件已经被上传到服务器上了吗?我们只是在选择是否要保存它?可以在客户端完成吗?

2 个解决方案

#1

When doing file uploads there are a number of things you can check. On the server side, there is also the maximum request size, which will actually stop an upload. But you are correct, the upload will have been already performed by the time either of these checks are caught.

当执行文件上传时，您可以检查很多东西。在服务器端，还有最大请求大小，这实际上会停止上传。但是您是对的，当这些检查被捕获时，上传已经被执行了。

You can now use the HTML5 File API on supported browsers to be cleverer with file uploads, including retrieving the size of them on the client-side, and even displaying previews. See here for an example: Client Checking file size using HTML5?

现在，您可以在受支持的浏览器上使用HTML5文件API来更巧妙地处理文件上传，包括在客户端检索它们的大小，甚至显示预览。请参见这里的示例:使用HTML5检查文件大小的客户机?

#2

using IE :

使用IE:

<html>
<head>
<script>
function getSize()
{
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

using Chrome or Firefox : With jQuery and the HTML5 File API specification implemented, you can use this simple snippet to access file properties such as size:

使用Chrome或Firefox:通过实现jQuery和HTML5文件API规范，您可以使用这个简单的代码片段来访问文件属性，如大小:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {
    alert(this.files[0].size);
});

Source : the excellent article on the topic here : http://www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

来源:关于这一主题的优秀文章:http://www.kavoir.com/2009/01/check- file-size-with-javascript-before-uploading.html

#1

#2