1

我正在使用 Valums ajax 文件上传插件使用 asp.net mvc 3 进行多文件上传。

意见

@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

首先，新文件名将返回给客户端，

假设要显示的文件名已经在以下行中产生，

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 在 firebug dom 结构中不可见，但在控制台中执行以下命令会显示 id，

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

如果 ie 浏览器导致您出现问题，则可能是因为，

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 回答