Multiple files to upload [duplicate]

Navigation
3

I'm looking for a Jquery plugin that will upload multiple files at the same time.

Does anyone know of any to let me know?

    
asked by anonymous 02.09.2014 / 20:05

1 answer

2

Download the jQuery-File-Upload package, and make a WebForm page with this content:

1 - WebFormUpload.Aspx

On this page pay attention to the references you should add on your page:

  • <script src="Scripts/jquery-1.10.2.js"></script>
  • <link href="~/Content/jquery.fileupload.css" rel="stylesheet" type="text/css" />
  • <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
  • <script src="Scripts/vendor/jquery.ui.widget.js"></script>
  • <script src="Scripts/jquery.fileupload.js"></script>
  • <script src="Scripts/cors/jquery.xdr-transport.js"></script> 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormUpload.aspx.cs" Inherits="WebApplicationForms.WebFormUpload" %>
<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Upload</title>        
    <script src="Scripts/jquery-1.10.2.js"></script>
    <link href="~/Content/jquery.fileupload.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/vendor/jquery.ui.widget.js"></script>    
    <script src="Scripts/jquery.fileupload.js"></script>
    <script src="Scripts/cors/jquery.xdr-transport.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Escolha as Fotos</span>
            <input id="fileupload" type="file" name="FilesPic" multiple="multiple" data-url="MultiUpload.ashx" />
        </span>
        <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <div id="files" class="files"></div>
        <!---->
        <div class="row" id="rowFotos"></div>        
        <script type="text/javascript">
            function Reset() {
                $('#progress .progress-bar').css('width', '0%');
            }
            $(function () {
                $('#fileupload').fileupload({
                    dataType: 'json',
                    done: function (e, data) {
                        window.setTimeout('Reset()', 2000);
                    },
                    progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('#progress .progress-bar').css('width', progress + '%');
                    }
                });
            });
        </script>        
    </form>
</body>
</html>

In this line <input id="fileupload" type="file" name="FilesPic" multiple="multiple" data-url="MultiUpload.ashx" /> has the address of the file MultiUpload.ashx which is the file that will receive the files below the file example.

2 - Handler.Ashx: MultiUpload.ashx

After this, create a MultiUpload.ashx file and place this code template in your application: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplicationForms
{
    /// <summary>
    /// Summary description for MultiUpload
    /// </summary>
    public class MultiUpload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            HttpPostedFile file = context.Request.Files["FilesPic"];
            file.SaveAs(context.Request.MapPath("~/fotos/") + file.FileName);
            context.Response.ContentType = "text/plain";
            context.Response.Write("1");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Following the reference to this question Has anyone ever been able to use jQuery File Upload? having this answer .

    
02.09.2014 / 22:44
GLM with random factor in R Active DLL Delphi