7

jQueryの複数ファイルアップロードプラグインを使用して、いくつかの写真をアップロードしています。ただし、フォームの投稿は1つ、トップ、アイテムのみです。フィドラー（POST）：

POST /Images/UploadImages HTTP/1.1
Host: localhost:4793
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost:4793/images
Cookie: .ASPXAUTH=EFAC4E03FA49056788028048AE1B099D3EB6D1D61AFB8E830C117297471D5689EC52EF40C7FE2CEF98FF6B7C8CAD3AB741A5E78F447AB361A2BDD501331A88C7B75120611CEA4FECA40D972BB9401472
Content-Type: multipart/form-data; boundary=---------------------------1509898581730
Content-Length: 290022

-----------------------------1509898581730
Content-Disposition: form-data; name="album"

1
-----------------------------1509898581730
Content-Disposition: form-data; name="file[]"; filename="Blue hills.jpg"
Content-Type: image/jpeg

...

これが私のコードです：

<% using (Html.BeginForm("UploadImages", "Images", FormMethod.Post, new { enctype = "multipart/form-data"}))
       {%>

    <%= Html.DropDownList("album", (IEnumerable<SelectListItem>)ViewData["Albums"])%>
      <br />    
    <input type="file" name="file[]" id="file" class="multi" accept="jpg|png" />
      <br />
     <input type="submit" name="submit" value="Submit" />

    <% } %>

そしてコントローラーのコード： 

public ActionResult UploadImages(FormCollection formValue)
    {           
        foreach (string file in Request.Files)
        {
            HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
            if (hpf.ContentLength == 0)
                continue;

            //do something with file
        }
        return RedirectToAction("Index");
    }

問題の解決方法を教えてください。たぶん、ユーザーに複数の画像をアップロードさせる他の方法をアドバイスすることができます。TIA

PS。sriptコントロールによって生成されたhtmlコードに加えて：

<input id="file" class="multi" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F1" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F2" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F3" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F4" class="multi MultiFile" type="file" accept="jpg|png" name="file[]"/>
4

9 に答える 9

7

解決策を見つけました。答えは、HttpPostedFileBase を IEnumerable に変更することでした (複数のファイルをアップロードする場合)。

上記と同じ問題がありました。これで私の問題は解決しました。ここにも良いリンクがあります：Phil Haacks's post

于 2011-03-24T22:34:12.863 に答える
3

問題は、POST サブミットが同じ名前のファイルの配列を取得するのと同じインデックスを含む配列にアクセスしようとしていたことです。

それ以外の

foreach (string file in Request.Files)
{
        HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;

使用する

for (int i = 0; i < Request.Files.Count; i++)
{
        HttpPostedFileBase hpf = Request.Files[i];
于 2010-09-20T12:58:04.880 に答える
2

リストにバインドできるはずです。

public ActionResult UploadImages(List<HttpPostedFileBase> file)
{ 
// magic
}

そしてあなたの見解は持っているべきです

<input id="file" class="multi" type="file" accept="jpg|png" name="file" style="position: absolute; top: -3000px;"/>
于 2010-01-02T21:47:15.670 に答える
1

jquery ajax と .net MVC を使用して多くのファイルを投稿する:

ビューで：

        <input type="file" name="files" multiple class="hidden"    id="inputFiles">
       <button id="upload" class="btn btn-sm btn-primary" type="button">Încarcă</button>

js の場合:

    var btnUpload = $("#upload");
var inputFiles = $('#inputFiles');

    btnUpload.click(function () {
    inputFiles.trigger('click');
});

inputFiles.on('change', function () {
    var formData = new FormData();

    for (var i = 0; i < inputFiles[0].files.length; i++)
        formData.append("files[" + i + "]", inputFiles[0].files[i])

    $.ajax({
        url: window.baseUrl + "Archivator/Upload",
        type: "POST",
        contentType: "application/json, charset=utf-8",
        dataType: "json",
        data: formData,
        processData: false,
        contentType: false,
    });
});

コントローラ：

 [HttpPost]
    public ActionResult Upload(IEnumerable<HttpPostedFileBase> files)
    {

        return Content("Succesfully");
    }
于 2016-11-16T13:29:10.573 に答える
1

見つけました。異なる名前の入力を生成するには、'namePattern' プロパティを定義する必要があります。

例：

<input type="file" accept="gif|jpg|jpeg|png" />


<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $i = (1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
            $(':file').MultiFile({ namePattern: '$name_$i', maxlength: 20 });
        });  
</script>

それにもかかわらず、あなたの助けに感謝します。

于 2010-01-31T13:39:32.383 に答える
1

問題は、生成された HTML の file[] という名前だと思います。明らかに、この si はプラグイン側からはうまく機能していません。

正しい動作を逆にすることがうまくいく場合もあります。名前から「[]」を削除してみてください。

実際には、入力フィールドを名前で使用していないためです。プラグインのホームページの例と同様に、名前を未設定のままにしておくことができます。

試してみる。

于 2010-01-02T21:46:46.030 に答える
1

ここで Phil Haack のソリューションを見ることができます。

ビューで

<form action="" method="post" enctype="multipart/form-data">

  <label for="file1">Filename:</label>
  <input type="file" name="files" id="file1" />

  <label for="file2">Filename:</label>
  <input type="file" name="files" id="file2" />

  <input type="submit"  />
</form>

コントローラー上

[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) {
  foreach (var file in files) {
    if (file.ContentLength > 0) {
      var fileName = Path.GetFileName(file.FileName);
      var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
      file.SaveAs(path);
    }
  }
  return RedirectToAction("Index");
}
于 2013-05-21T01:27:09.147 に答える