在mvc中拖放文件
时间：2023-04-29
本文介绍了在mvc中拖放文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时送ChatGPT账号..
我想通过拖放上传文件.我编写了如下代码，但每次尝试上传文件时，都会显示上传失败.谁能告诉我我错在哪里?我想从外部源中拖动项目并将其上传到我的文件夹中，但我无法做到.
I want to upload file using drag and drop. I have written code as below but every time I attempt to upload a file, it is showing upload failed. Can anyone tell me where I am wrong? I want to drag items from outer source and have it uploaded into my folder but I am not able to do it.
对于控制器:-
public ActionResult File()
{
return View();
}
/// <summary>
/// The max file size in bytes
/// </summary>
protected int maxRequestLength
{
get
{
HttpRuntimeSection section =
ConfigurationManager.GetSection("system.web/httpRuntime") as HttpRuntimeSection;
if (section != null)
return section.MaxRequestLength * 1024; // Default Value
else
return 4096 * 1024; // Default Value
}
}
/// <summary>
/// Checks if a file is sent to the server
/// and saves it to the Uploads folder.
/// </summary>
[HttpPost]
private void handleFileUpload()
{
if (!string.IsNullOrEmpty(Request.Headers["X-File-Name"]))
{
string path = Server.MapPath(string.Format("~/Uploads/{0}", Request.Headers["X-File-Name"]));
Stream inputStream = Request.InputStream;
FileStream fileStream = new FileStream(path, FileMode.OpenOrCreate);
inputStream.CopyTo(fileStream);
fileStream.Close();
}
}
为了查看它是:-
<!DOCTYPE html>
<html>
<head runat="server">
<title>Drag n' Drop File Upload</title>
<link href="/Style.css" rel="Stylesheet" />
<style>
body
{
font: 12px Arial;
}
#dropZone
{
border-radius: 5px;
border: 2px solid #ccc;
background-color: #eee;
width: 250px;
padding: 50px 0;
text-align: center;
font-size: 18px;
color: #555;
margin: 50px auto;
}
#dropZone.hover
{
border-color: #aaa;
background-color: #ddd;
}
#dropZone.error
{
border-color: #f00;
background-color: #faa;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var dropZone;
// Initializes the dropZone
$(document).ready(function () {
dropZone = $('#dropZone');
dropZone.removeClass('error');
// Check if window.FileReader exists to make
// sure the browser supports file uploads
if (typeof(window.FileReader) == 'undefined') {
dropZone.text('Browser Not Supported!');
dropZone.addClass('error');
return;
}
// Add a nice drag effect
dropZone[0].ondragover = function () {
dropZone.addClass('hover');
return false;
};
// Remove the drag effect when stopping our drag
dropZone[0].ondragend = function () {
dropZone.removeClass('hover');
return false;
};
// The drop event handles the file sending
dropZone[0].ondrop = function(event) {
// Stop the browser from opening the file in the window
event.preventDefault();
dropZone.removeClass('hover');
// Get the file and the file reader
var file = event.dataTransfer.files[0];
@* if(file.size > @maxRequestLength {
dropZone.text('File Too Large!');
dropZone.addClass('error');
return false;*@
// // Validate file size
// if(file.size > <%=maxRequestLength%>) {
// dropZone.text('File Too Large!');
// dropZone.addClass('error');
// return false;
/相关文章
如何在 Jasmine 中编写 FileReader 测试?How do I write FileReader test in Jasmine?(如何在 Jasmine 中编写 FileReader 测试?)- JS/HTML5 WebSocket:无需 HTTP 调用即可连接JS/HTML5 WebSocket: Connect without HTTP call(JS/HTML5 WebSocket:无需 HTTP 调用即可连接)
- CSS:分页后重复表头(打印视图)CSS: Repeat Table Header after Page Break (Print View)(CSS:分页后重复表头(打印视图))
- 将 HTML 头放在另一个文件中Put HTML head in another file(将 HTML 头放在另一个文件中)
- “头"和“头"之间的真正区别是什么?和“What is the real difference between the quot;headquot; and quot;headerquot; tag?(“头和“头之间的真正区别是什么?和“标题标签?)
- IE8 中具有 100% 内容高度的页眉/页脚布局Header/Footer Layout with 100% Content Height in IE8(IE8 中具有 100% 内容高度的页眉/页脚布局)