Question

我正在使用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 });
        }

问题解释 我有上传控制器操作，我已经重命名上传文件的文件名，它工作正常。这里的问题是文件上传后，文件名显示原始文件名的名称，并显示文件大小。但我想显示重命名的文件名，以及从表单字段提交的下拉框列表和日期时间值中选择的值，并且文件大小正常。我不知道如何修改文件上传完成后显示的内容。

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

完成上传后，修改valums文件上传插件中的内容

1 个答案: