多个文件上传得到重复和重复 [英] Multiple file uploading get duplicated and repeated

问题描述

我正在使用HTTP post功能上传多个文件，但是当我选择4个以上的文件后，上传后的文件会被重复并在上传的文件夹中重复，例如如果我选择了9个文件，那么它将显示32个文件或一段时间18个文件我怎么能解决它任何可以帮助我的人？这是我的代码



我尝试过：

i am using HTTP post function to upload multiple files but when i select more than 4 files then after uploading the files are duplicated and repeated in uploaded folder for example if i select 9 files then it will appear 32 files or some time 18 files how can i solve it any person who can help me please ?? here is my code

What I have tried:

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

namespace FileUploading.Controllers
{
    public class HomeController : Controller
    {
        
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
     public JsonResult Upload()
        {
            try
            {
                HttpFileCollectionBase files = Request.Files;

                for (int i = 0; i < files.Count; i++)
                {
                    var newFile = files[i];

                    string time = DateTime.Now.ToString().Replace("/", "_");
                    time = time.Replace(":", "_");

                    string path = Server.MapPath("~/Images/" + time + "_" + newFile.FileName);
                    newFile.SaveAs(path);
                }
                return Json("Uploaded", JsonRequestBehavior.AllowGet);
            }
            catch
            {
                return Json("Failed", JsonRequestBehavior.AllowGet);

            }           
        }

    }
}

及以下是索引视图代码我在上传时也应用多个进度条

and below is index view code i also apply multiple progressbar on uploading

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" multiple id="file"/><br />
    
    <div id="all-progress-bars"></div>
    
    <span id="display"></span>
    <button class="btn alert-success" href="javascript:void(0)" id="abc">Upload</button>
}
<script type="text/javascript">
    $("#abc").click(function (e) {
        e.preventDefault();
        var totalCountOfFiles = document.getElementById("file").files.length;
        var formDataToPost = new FormData();
        var str = '';
        for (var i = 0; i < totalCountOfFiles; i++) {
            str += '<div class="progress"><div class="progress-bar pbbb' + i + ' progress-bar-striped active" id="progressBar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">File ' + (i+1) + '<span class="sr-only"></span></div></div>';
        }
        $('#all-progress-bars').html(str);

        var counter = 1;
        var percentComplete = 0;
        for (var i = 0; i < totalCountOfFiles; i++) {
            var file = document.getElementById("file").files[i];
            formDataToPost.append("file", file);
            $.ajax({
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    //Upload progress
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            //alert(counter);
                            percentComplete = evt.loaded / evt.total;
                            $('#all-progress-bars').children('.progress:nth-child('+counter+')').children('div').css('width', percentComplete * 100 + '%')
                            //Do something with upload progress
                            console.log(percentComplete);
                        }
                    }, false);
                                      //Download progress
                                       xhr.addEventListener("progress", function (evt) {
                                           if (evt.lengthComputable) {
                                               var percentComplete = evt.loaded / evt.total;
                                               //Do something with download progress
                                               console.log(percentComplete);
                                           }
                                       }, false);
                                       return xhr;
                 }, 
                type: 'POST',
                url: "@Url.Action("Upload", "Home")",
                data: formDataToPost,
                dataType: 'json',
                contentType: false,
                processData:false,
                success: function (data) {
                    $('#all-progress-bars').children('.progress:nth-child(' + counter + ')').children('div').css('width', '100%')
                    counter++;
                }
                });
              }
        });
    </script>

推荐答案

（ #abc）。click（function（e）{
e.preventDefault（）;
var totalCountOfFiles = document .getElementById（ file）。files.length;
var formDataToPost = new FormData（）;
var str = ' ';
for （ var i = 0 ; i < totalCountOfFiles; i ++）{
str + = ' < div class =progress>< div class =progress-bar pbbb' + i + ' progress-bar-striped activeid =progressBarrole =progressbararia-valuenow =45aria-valuemin =0aria-valuemax = 100style =width：0％>文件' +（i + 1）+ ' < span class =sr-only>< / span>< / div>< / div>';
}

("#abc").click(function (e) { e.preventDefault(); var totalCountOfFiles = document.getElementById("file").files.length; var formDataToPost = new FormData(); var str = ''; for (var i = 0; i < totalCountOfFiles; i++) { str += '<div class="progress"><div class="progress-bar pbbb' + i + ' progress-bar-striped active" id="progressBar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">File ' + (i+1) + '<span class="sr-only"></span></div></div>'; }

（' ＃all-progress-bars').html(str）;

var counter = 1 ;
var percentComplete = 0 ;
for （ var i = 0 ; i < totalCountOfFiles; i ++）{
var file = document.getElementById（ file）。files [i];
formDataToPost.append（ file，file）;

('#all-progress-bars').html(str); var counter = 1; var percentComplete = 0; for (var i = 0; i < totalCountOfFiles; i++) { var file = document.getElementById("file").files[i]; formDataToPost.append("file", file);

.ajax（{
xhr：function（）{
var xhr = new window.XMLHttpRequest（）;
// 上传进度
xhr.upload.addEventListener（ progress，function（evt）{
if （evt.lengthComputable）{
// alert（ counter）;
percentComplete = evt.loaded / evt.total;

.ajax({ xhr: function () { var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { //alert(counter); percentComplete = evt.loaded / evt.total;

这篇关于多个文件上传得到重复和重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！