在mvc中拖放文件

2023-02-24前端开发问题
3

本文介绍了在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;
            /
The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
2024-04-20 前端开发问题
6

缩放背景图像以适合 ie8 窗口
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)...
2024-04-19 前端开发问题
11