Fatal编程技术网

Asp.net mvc 4 从控制器中的div读取图像

asp.net-mvc-4 html

Asp.net mvc 4 从控制器中的div读取图像,asp.net-mvc-4,html,image-preloader,Asp.net Mvc 4,Html,Image Preloader,我已经创建了一个索引页 <body> <div> <script src="~/Scripts/jquery-1.7.1.js"></script> <style> .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> @using (Ht

我已经创建了一个索引页

<body>
    <div>
        <script src="~/Scripts/jquery-1.7.1.js"></script>
   <style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>
@using (Html.BeginForm())
{
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
    
     <input type="submit" name="Post" />
}
<script>
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                      '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
    </div>
</body>
当上传图像时，这就是chrome中的样子

但在视图源中，我得到的渲染输出如下

<form action="/imgUpload" method="post"><input type="file" id="files" name="files[]" multiple />

如何从该div读取所有图像并将其保存到磁盘

编辑

示例脚本：

同样的问题我可以在那里看到

首先更改表单帮助器

@using (Html.BeginForm("Action",
                       "Controller", FormMethod.Post,
                        new { enctype = "multipart/form-data" }))
然后在控制器中，您可以从
Request.files
访问所有已发布的文件，或者您可以更改控制器的参数

这不起作用。我猜原因是标签中没有存储任何内容。“列表”？！您需要将其更改为html中upload元素的名称，或者只使用index，或者使用AllKeys获取所有键并运行foreach循环，或者类似于我使用的var tlist=Request.Files.AllKeys；foreach（tlist中的var list）{list.ToString（）；}此循环只运行一次，list.ToString（）为我提供了“files[]” 
@using (Html.BeginForm("Action",
                       "Controller", FormMethod.Post,
                        new { enctype = "multipart/form-data" }))