在上传 Jquery 上传器时要求用户输入文件名？ [关闭]答案

【问题标题】：Ask user to enter file name while uploading Jquery uploader? [closed]在上传 Jquery 上传器时要求用户输入文件名？ [关闭]
【发布时间】：2014-08-07 14:56:59
【问题描述】：

我有以下代码，现在可以完美运行。现在我必须稍微改变一下，要求用户在上传到服务器之前输入文件名？我们该怎么做？

      <span class="btn btn-primary fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>@(i18n_Models_Image.AddImages + "...")</span>
                <input id="fileupload" type="file" name="files[]"  accept="image/*" >

            </span>

      $(document).ready(function() {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '../admin/image/uploadfiles',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            success: function(data, status, xhr) {
                window.location = data.url;
            },
            error: function(xhr, textStatus, errorThrown) {
                if (errorThrown === 'abort') {
                    alert('@i18n_Models_Image.UploadCancelled');
                }
            }
        }).on('fileuploadprogressall', function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        }); });

【问题讨论】：

标签： jquery asp.net asp.net-mvc jquery-file-upload

【解决方案1】：

请看下面两个例子：

jQuery-File-Upload 5.9 的示例

1) 使用自动上传时的情况

型号：

public class MyModel
{
    public HttpPostedFileBase MyFile { get; set; }
}

查看：

  @model MyModel

  <form>
       <input type="text" name="FileName" />
       <div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-auto-upload", type = "file" })</div>
  </form>

JavaScript：

<script type="text/javascript">

    var jqXHRData;

    $(document).ready(function () {        
        initAutoFileUpload();          
    });       

    function initAutoFileUpload() {
        'use strict';

        $('#fu-my-auto-upload').fileupload({
            autoUpload: true,
            url: '/File/UploadFile',
            dataType: 'json',
            add: function (e, data) {
                var jqXHR = data.submit()
                    .success(function (data, textStatus, jqXHR) {

                    })
                    .error(function (data, textStatus, errorThrown) {
                        if (typeof (data) != 'undefined' || typeof (textStatus) != 'undefined' || typeof (errorThrown) != 'undefined') {
                            alert(textStatus + errorThrown + data);
                        }
                    });
            },
            fail: function (event, data) {
                if (data.files[0].error) {
                    alert(data.files[0].error);
                }
            }
        });
    }       

</script>

控制器：

    [HttpPost]
    public virtual ActionResult UploadFile(string fileName)
    {
        HttpPostedFileBase myFile = Request.Files["MyFile"];

        //Save file

        return Json(new { isUploaded = true });
    }

2) AutoUploading = false 时的情况

型号：

public class MyModel
{
    public HttpPostedFileBase MyFile { get; set; }
}

查看：

     @model MyModel

    <form>
        <input type="text" name="FileName" />
        <div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-simple-upload", type = "file" }) &nbsp;<a href="#" id="hl-start-upload">Start upload</a> </div>
    </form>

JavaScript：

<script type="text/javascript">

    var jqXHRData;     

    $(document).ready(function () {
        initSimpleFileUpload();

        $("#hl-start-upload").on('click', function (e) {       

            if (jqXHRData) {
                jqXHRData.submit();
            }
            return false;
        });

    });

    function initSimpleFileUpload() {
        'use strict';

        $('#fu-my-simple-upload').fileupload({
            url: '/File/UploadFile',
            dataType: 'json',
            add: function (e, data) {                    
                jqXHRData = data
            },
            done: function (event, data) {

            },
            fail: function (event, data) {
                if (data.files[0].error) {
                    alert(data.files[0].error);
                }
            }
        });
    }
</script>

控制器：

    [HttpPost]
    public virtual ActionResult UploadFile(string fileName)
    {
        HttpPostedFileBase myFile = Request.Files["MyFile"];

        //Save file

        return Json(new { isUploaded = true });
    }

【讨论】：