在jquery选项卡中实现多个文件上载控件

Question

我正在使用asp.net mvc 2.我有三个jquery选项卡。在三个选项卡的每一个中，我想上传多个文件并保存在服务器上。什么是最好的方法来做到这一点我也想实现ajax基本文件上传

Answer 1

带有AJAX文件上传的

This should help。对于多个文件上传，快速谷歌显示the jquery multifile plugin。

Answer 2

Uploadify基于flash，Form Plugin更强大，因为它可以与其他表单元素一起使用。有大量的jquery插件可以满足您的需求。我建议谷歌搜索'jquery ajax uploads'并尝试提供给你的不同选项，看看哪个适合你的项目。

修改

以下是我在使用表单插件在textarea中返回响应时使用的代码。

以下是上传操作：

public FileUploadJSONResult Upload()
    {
        FileUploadJSONResult result;

        try
        {
            if (Request.Files.Count > 0)
            {
                // Save uploaded file here
                AttachmentServices attachmentServices = new AttachmentServices();
                IAttachment attachment = attachmentServices.UploadFile(Request.Files[0]);

                // Wrap the data in a textarea as required by the form plugin, but return it using JSON
                result = new FileUploadJSONResult()
                {
                    Data = new
                    {
                        FileName = attachment.FileName,
                        ErrorMessage = string.Empty
                    }
                };
            }
            else
            {
                result = new FileUploadJSONResult
                {
                    Data = new
                    {
                        FileName = string.Empty,
                        ErrorMessage = "No file to upload. Please select a file to upload."
                    }
                };
            }
        }
        catch (Exception e)
        {
            LogError(logger, e, null);

            Exception root = e;
            while ((root.InnerException) != null)
            {
                root = root.InnerException;
            }

            result = new FileUploadJSONResult
            {
                Data = new
                {
                    FileName = string.Empty,
                    ErrorMessage = root.Message
                }
            };
        }

        return result;
    }

然后是FileUploadJSONResult：

public class FileUploadJSONResult : JsonResult
{  
    /// <summary>
    /// The following explanation of this code is from http://www.malsup.com/jquery/form:
    /// 
    ///  Since it is not possible to upload files using the browser's XMLHttpRequest object, the Form Plugin 
    ///  uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. 
    ///  The iframe element is used as the target of the form's submit operation which means that the server response is 
    ///  written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the 
    ///  response type is script or JSON, both of which often contain characters that need to be repesented using 
    ///  entity references when found in HTML markup.
    ///  To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be 
    ///  embedded in a textarea element and it is recommended that you do so for these response types when used in 
    ///  conjuction with file uploads. Please note, however, that if a file has not been selected by the user for the 
    ///  file input then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your 
    ///  server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the 
    ///  plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea. 
    /// </summary>
    /// <param name="context">Controller context</param>
    public override void ExecuteResult(ControllerContext context)
    {
        this.ContentType = "text/html";
        context.HttpContext.Response.Write("<textarea>");
        base.ExecuteResult(context);
        context.HttpContext.Response.Write("</textarea>");
    }
}

然后这是启动和处理上传的实际jquery调用：

    function BeginFileUpload() {
       // Form plugin options
        var options = {
            success: function(data) { Attachments_ShowResponse(data); },  // post-submit callback 
            dataType: 'json',       // 'xml', 'script', or 'json' (expected server response type) 
            iframe: true
        };

        // Bind the form to the form plugin
        $('#idofForm').ajaxForm(options);
        $('#idofForm').submit();
}

// Callback after a file has been uploaded
function Attachments_ShowResponse(data) {
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 

    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 

    if (data.ErrorMessage == '') {
        Attachments_CreateNewTableRow(data.FileName);
    } else {
        Attachments_AppendError(settings.controlID, 'Error uploading ' + data.FileName + ': ' + data.ErrorMessage);
    }
}