1

asp.netmvc3を使用したマルチファイルアップロード用のValumsajaxファイルアップロードプラグインを使用しています。

ビュー

@using (Html.BeginForm("Upload", "AjaxUpload", FormMethod.Post, new { name = "form1", @id="form1" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Upload Wav File</legend>
         <div class="editor-label">
           @Html.Label("Select Active Date Time")
        </div>
        <div>

        <input type="text" id="active" value="@DateTime.Now" />
      </div>

         <div class="editor-label">
           @Html.Label("Select Language")
        </div>
        <div>
           @Html.DropDownList("Language1", (SelectList)ViewBag.lang)
        </div>
         <div class="editor-label">
           @Html.Label("Select Category")
        </div>
        <div>
           @Html.DropDownList("ParentCategoryID", ViewBag.ParentCategoryID as SelectList) 
        </div>
      <br />
      <div id="file-uploader">
            <noscript>
                <p>Please enable JavaScript to use file uploader.</p>
            </noscript>
        </div>
    </fieldset>
}

スクリプト

<script type="text/javascript">
    var uploader = new qq.FileUploader
    ({
        element: document.getElementById('file-uploader'),
        onSubmit: function () {
            uploader.setParams({
                param1: document.getElementById("Language1").value,
                param2: document.getElementById("ParentCategoryID").value,
                param3: document.getElementById("active").value
            });
        },

        action: '@Url.Action("upload")', // put here a path to your page to handle uploading
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // user this if you want to upload only pictures
        sizeLimit: 4000000, // max size, about 4MB
        minSizeLimit: 0, // min size
        debug: true
    });

</script>

コントローラのアクション

 [HttpPost]
        public ActionResult Upload(HttpPostedFileBase qqfile, string param1, string param2, string param3)
        {
            var filenam = DateTime.Now.ToString("yyyyMMddhhmmss") + param1 + param2 + Request["qqfile"];
            var filename = filenam.Replace(" ", "_");

           var filepath = Path.Combine(Server.MapPath("~/App_Data/Uploads"), Path.GetFileName(filename));


           if (param2 != null || param2 != "")
           {
               var wav = new PlayWav
               {
                   Name = filename,
                   CategoryID = int.Parse(param2),
                   UserID = repository.GetUserID(HttpContext.User.Identity.Name),
                   LanguageID = int.Parse(param1),
                   UploadDateTime = DateTime.Now,
                   ActiveDateTime = DateTime.Parse(param3),
                   FilePath = filepath
               };

               db.AddToPlayWavs(wav);


               if (qqfile != null)
               {
                   qqfile.SaveAs(filepath);

                   db.SaveChanges();

                   return Json(new { success = true }, "text/html");
               }
               else
               {
                   if (!string.IsNullOrEmpty(filepath))
                   {

                       using (var output = System.IO.File.Create(filepath))
                       {
                           Request.InputStream.CopyTo(output);
                       }

                       db.SaveChanges();

                       return Json(new { success = true });
                   }
               }
           }
            return Json(new { success = false });
        }

問題の説明 アップロードされたファイルのファイル名の名前を変更し、正常に動作しているコントローラーのアップロードアクションがあります。ここでの問題は、ファイルがアップロードされた後、ファイル名に元のファイル名の名前が表示され、ファイルサイズも表示されることです。しかし、名前が変更されたファイル名と、ドロップダウンボックスリストで選択された値、およびフォームフィールドから送信された日時の値を表示したいのですが、ファイルサイズは問題ありません。ファイルのアップロードが完了した後に表示されるコンテンツをどのように変更できるかわかりません。

4

1 に答える 1

1

まず、新しいファイル名がcliensideに次のように返されます。

表示されるファイル名がすでに次の行に生成されていると仮定すると、

var filenam = DateTime.Now.ToString("yyyyMMddhhmmss") 
              + param1 + param2 + Request["qqfile"];

これはクライアント側に送信する必要がありますが、

return Json(new { success = true, filename });

クライアント側のコードが変更されました。onCompletedイベントハンドラーに注意してください。その仕事は、元のファイル名をサーバーから受信した新しいファイル名に置き換えることです。

<script type="text/javascript">
    var uploader = new qq.FileUploader
    ({
        element: document.getElementById('file-uploader'),
        onSubmit: function () {
            uploader.setParams({
                param1: document.getElementById("Language1").value,
                param2: document.getElementById("ParentCategoryID").value,
                param3: document.getElementById("active").value
            });
        },
        onComplete: function (id, fileName, responseJson) {
            $(this.element).find('.qq-upload-list li[qqFileId=' + id + ']').find('.qq-upload-file').html(responseJson.filename);
        },
        action: '@Url.Action("upload")', // put here a path to your page to handle uploading
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // user this if you want to upload only pictures
        sizeLimit: 4000000, // max size, about 4MB
        minSizeLimit: 0, // min size
        debug: true
    });

</script>

お役に立てれば。

編集：

li要素のqqFileId属性は、有益なliアイテムとアップロードされたファイルの間の唯一の関連付けリンクです。qqFileIdはfirebugdom構造には表示されませんが、コンソールで次のコマンドを実行すると、idが表示されます。

$('.qq-upload-list li:last').attr('qqFileId')

つまり、ブラウザが問題を引き起こしている場合は、

find('.qq-upload-list li[qqFileId=' + id + ']')

次のように変更できます

onComplete: function (id, fileName, responseJson) {
    $(this.element).find('.qq-upload-list li').each(function () {
        if($(this).attr('qqFileId')==id)
            $(this).find('.qq-upload-file').html(responseJson.filename);
    });
}
于 2012-07-22T17:50:46.597 に答える