在mvc中拖放文件
时间：2023-02-24
本文介绍了在mvc中拖放文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我想通过拖放上传文件.我编写了如下代码，但每次尝试上传文件时，都会显示上传失败.谁能告诉我我错在哪里?我想从外部源中拖动项目并将其上传到我的文件夹中，但我无法做到.
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;
/相关文章
在 javascript 中检测 HTML5 拖放支持Detecting HTML5 Drag And Drop support in javascript(在 javascript 中检测 HTML5 拖放支持)- 除非处理了拖动，否则 HTML5 放置事件不起作用HTML5 drop event doesn#39;t work unless dragover is handled(除非处理了拖动，否则 HTML5 放置事件不起作用)
- 如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?How to use jQuery#39;s drop event to upload files dragged from the desktop?(如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?)
- HTML5: dragover(), drop(): 如何获取当前 x,y 坐标?HTML5: dragover(), drop(): how get current x,y coordinates?(HTML5: dragover(), drop(): 如何获取当前 x,y 坐标?)
- 如何制作<div>可调整大小?How to make lt;divgt; resizeable?(如何制作lt;divgt;可调整大小?)
- Internet Explorer 9 拖放 (DnD)Internet Explorer 9 Drag and Drop (DnD)(Internet Explorer 9 拖放 (DnD))
最新文章
- 以编程方式创建拖动事件时，dataTransfer 为空
- 如何在“drop"事件后停止重定向?
- 拖动&直接从 Web 应用程序中的 Outlook 删除
- 使用 Selenium Webdriver for Ruby 进行 HTML5 拖放
- 获取 div 元素的 X 和 Y 坐标
- HTML5 拖放 - Firefox 被重定向
- HTML5 draggable='false' 在 Firefox 浏览器中不起作用
- 拖放的最佳轻量级解决方案是什么?
- JavaScript/HTML5/jQuery 拖放上传 - “未捕获的类型错误:无法读取未定义的属性‘文件’"
- 在 HTML5 Canvas 中拖放多个对象