Drag n drop multiple file uploads with process bar using JavaScript. Example.

No comments
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
namespace WebApplication4.Controllers
{
    public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult JqAJAX(List<string> list)
        {
            try
            {

                return Json(1);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }
    public class Student
    {
        public string data { get; set; }
    }
}
--------------------

@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <style>
        #dragandrophandler {
            border: 2px dotted #0B85A1;
            width: 400px;
            color: #92AAB0;
            text-align: left;
            vertical-align: middle;
            padding: 10px 10px 10 10px;
            margin-bottom: 10px;
            font-size: 200%;
        }
    </style>
    <style>
        #selectedFiles img {
            max-width: 200px;
            max-height: 200px;
            float: left;
            margin-bottom: 10px;
        }

        .thumbnail {
            width: 18px;
            height: 18px;
        }
    </style>
</head>
<body>
    <form id="myForm" method="post">
        <br />
        <br />
        <div id="dragandrophandler">Drag & Drop Files Here</div>
        Category : <input id="Text1" type="text" />
        Files: <input type="file" id="files" name="files" multiple><br />
        <div id="selectedFiles"></div>
        <input type="submit">
        <div class="row">
            <div class="col-sm-12">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition:none;">
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        var selDiv = "";
        var storedFiles = [];
        function handleFileSelect(e) {
            debugger
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function (f) {
                storedFiles.push(f.name);
                var reader = new FileReader();
                reader.onload = function (e) {
                    debugger
                    var html = "<div><img  src=\"" + '/Uploads/k.jpg' + "\" data-file='" + f.name + "' class='selFile thumbnail' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
                    selDiv.append(html);
                }
                reader.readAsDataURL(f);
            });

        }
        function handleFileSelect1(files) {
            debugger
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function (f) {
                storedFiles.push(f.name);
                var reader = new FileReader();
                reader.onload = function (e) {
                    debugger
                    var html = "<div><img  src=\"" + '/Uploads/k.jpg' + "\" data-file='" + f.name + "' class='selFile thumbnail' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
                    selDiv.append(html);
                }
                reader.readAsDataURL(f);
            });

        }
        $(document).ready(function () {
            $("#files").on("change", handleFileSelect);
            selDiv = $("#selectedFiles");
            $("#myForm").on("submit", handleForm);
            $("body").on("click", ".selFile", removeFile);
            debugger
            var obj = $("#dragandrophandler");
            obj.on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                $(this).css('border', '2px solid #0B85A1');
            });
            obj.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            obj.on('drop', function (e) {
                debugger
                $(this).css('border', '2px dotted #0B85A1');
                e.preventDefault();
                var files = e.originalEvent.dataTransfer.files;
                handleFileSelect1(files);
            });
            $(document).on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            $(document).on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                obj.css('border', '2px dotted #0B85A1');
            });
            $(document).on('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });

        });

        function handleForm(e) {

            var items = new Array();
            e.preventDefault();
            debugger
            var data = new FormData();
            for (var i = 0, len = storedFiles.length; i < len; i++) {
                data.append('files', storedFiles[i]);
                items.push(storedFiles[i]);
            }
            var name = $("#Text1").val();
            debugger
            var Student = items;
            $.ajax({
                type: "POST",
                url: "/Demo/JqAJAX",
                data: JSON.stringify(Student),
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    debugger
                    var value = result;
                    debugger
                },
                error: function () {
                    alert("Error occured!!")
                }
            });
        }

        function removeFile(e) {
            var file = $(this).data("file");
            for (var i = 0; i < storedFiles.length; i++) {
                if (storedFiles[i].name === file) {
                    storedFiles.splice(i, 1);
                    break;
                }
            }
            $(this).parent().remove();
        }
    </script>

</body>
</html>
Share:
Read More

Sunday, 16 December 2018

Drag n drop multiple file uploads with process bar using JavaScript. Example.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
namespace WebApplication4.Controllers
{
    public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult JqAJAX(List<string> list)
        {
            try
            {

                return Json(1);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }
    public class Student
    {
        public string data { get; set; }
    }
}
--------------------

@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <style>
        #dragandrophandler {
            border: 2px dotted #0B85A1;
            width: 400px;
            color: #92AAB0;
            text-align: left;
            vertical-align: middle;
            padding: 10px 10px 10 10px;
            margin-bottom: 10px;
            font-size: 200%;
        }
    </style>
    <style>
        #selectedFiles img {
            max-width: 200px;
            max-height: 200px;
            float: left;
            margin-bottom: 10px;
        }

        .thumbnail {
            width: 18px;
            height: 18px;
        }
    </style>
</head>
<body>
    <form id="myForm" method="post">
        <br />
        <br />
        <div id="dragandrophandler">Drag & Drop Files Here</div>
        Category : <input id="Text1" type="text" />
        Files: <input type="file" id="files" name="files" multiple><br />
        <div id="selectedFiles"></div>
        <input type="submit">
        <div class="row">
            <div class="col-sm-12">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition:none;">
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        var selDiv = "";
        var storedFiles = [];
        function handleFileSelect(e) {
            debugger
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function (f) {
                storedFiles.push(f.name);
                var reader = new FileReader();
                reader.onload = function (e) {
                    debugger
                    var html = "<div><img  src=\"" + '/Uploads/k.jpg' + "\" data-file='" + f.name + "' class='selFile thumbnail' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
                    selDiv.append(html);
                }
                reader.readAsDataURL(f);
            });

        }
        function handleFileSelect1(files) {
            debugger
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function (f) {
                storedFiles.push(f.name);
                var reader = new FileReader();
                reader.onload = function (e) {
                    debugger
                    var html = "<div><img  src=\"" + '/Uploads/k.jpg' + "\" data-file='" + f.name + "' class='selFile thumbnail' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
                    selDiv.append(html);
                }
                reader.readAsDataURL(f);
            });

        }
        $(document).ready(function () {
            $("#files").on("change", handleFileSelect);
            selDiv = $("#selectedFiles");
            $("#myForm").on("submit", handleForm);
            $("body").on("click", ".selFile", removeFile);
            debugger
            var obj = $("#dragandrophandler");
            obj.on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                $(this).css('border', '2px solid #0B85A1');
            });
            obj.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            obj.on('drop', function (e) {
                debugger
                $(this).css('border', '2px dotted #0B85A1');
                e.preventDefault();
                var files = e.originalEvent.dataTransfer.files;
                handleFileSelect1(files);
            });
            $(document).on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            $(document).on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                obj.css('border', '2px dotted #0B85A1');
            });
            $(document).on('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });

        });

        function handleForm(e) {

            var items = new Array();
            e.preventDefault();
            debugger
            var data = new FormData();
            for (var i = 0, len = storedFiles.length; i < len; i++) {
                data.append('files', storedFiles[i]);
                items.push(storedFiles[i]);
            }
            var name = $("#Text1").val();
            debugger
            var Student = items;
            $.ajax({
                type: "POST",
                url: "/Demo/JqAJAX",
                data: JSON.stringify(Student),
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    debugger
                    var value = result;
                    debugger
                },
                error: function () {
                    alert("Error occured!!")
                }
            });
        }

        function removeFile(e) {
            var file = $(this).data("file");
            for (var i = 0; i < storedFiles.length; i++) {
                if (storedFiles[i].name === file) {
                    storedFiles.splice(i, 1);
                    break;
                }
            }
            $(this).parent().remove();
        }
    </script>

</body>
</html>
at No comments:
Subscribe to: Posts (Atom)

Popular

Total Pageviews

Archive