Multiple files for upload

Asked

Viewed 2,295 times

3

I’m looking for a plugin Jquery upload multiple files at the same time.

Does anyone know of any to inform me?

c# jquery asp.net

  • Marconi.. this depends a lot.. you will need multiple progress bars ?

  • Wisner Oliveira I need him to let me select multiple files at the same time, for upload. I don’t necessarily need progress bars.

  • Already tried using an Httpfilecollection ?

  • Never to hear how it would be done?

  • Look, I use the jQuery File Upload and he does it very well.

1 answer

2


Download the package jQuery-File-Upload, 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>

Along those lines <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 follows below the file example.

2 - Handler.Ashx: Multiupload.ashx

After that create a file MultiUpload.ashx and put 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 of this question Someone has already managed to use jQuery File Upload? having that reply.

Browser other questions tagged c# jquery asp.net

You are not signed in. Login or sign up in order to post.