在这里我的Jquery代码:$(document).ready(function () { $("#uploadbutton").click(function () {" />

如何异步上传文件?

javascript jquery ajax asynchronous xmlhttprequest

1267290 观看

30回复

32262 作者的声誉

我想用jQuery异步上传一个文件。这是我的HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

在这里我的Jquery代码:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

我只获取文件名,而不是上传文件。我该怎么做才能解决这个问题?

现行解决方案

我正在使用jQuery Form Plugin上传文件。

作者: Sergio del Amo 的来源 发布者: 2008 年 10 月 3 日

回应 (30)


95

2668 作者的声誉

注意:此答案已过时,现在可以使用XHR上传文件。


您无法使用XMLHttpRequest(Ajax)上传文件。您可以使用iframe或Flash模拟效果。优秀的jQuery表单插件,通过iframe发布您的文件以获得效果。

作者: Mattias 发布者: 03.10.2008 10:36

258

123595 作者的声誉

2019年更新:它取决于您的人口统计使用的浏览器。

使用“新”HTML5 fileAPI 要理解的重要一点是,直到IE 10才支持。如果您所针对的特定市场对旧版Windows的倾向高于平均水平,则可能无法访问它。

截至2017年,大约5%的浏览器是IE 6,7,8或9中的一个。如果你进入一家大公司(例如,这是一个B2B工具,或者你正在提供培训的东西),那么这个数字可能会爆炸。2016年,我与超过60%的机器使用IE8的公司打交道。

这是编辑的2019年,距我最初的答案差不多11年。IE9及更低版本在全球范围内均在1%左右,但仍然存在较高使用率的集群。

从这个重要的外卖-whatever的特征-是检查什么的浏览器用户使用。如果你不这样做,你将学到一个快速而痛苦的教训,为什么“为我工作”对于客户的交付是不够的。caniuse是一个有用的工具,但请注意他们从中获取人口统计数据的位置。它们可能与您的不一致。这绝不比企业环境更真实。

我的答案是从2008年开始的。


但是,有一些可行的非JS文件上传方法。您可以在页面上创建一个iframe(使用CSS隐藏),然后定位表单以发布到该iframe。主页不需要移动。

这是一个“真实”的帖子,所以它不是完全互动的。如果您需要状态,则需要服务器端进行处理。这会根据您的服务器而有很大差异。ASP.NET具有更好的机制。PHP plain失败,但您可以使用Perl或Apache修改来绕过它。

如果您需要多个文件上传,最好一次执行一个文件(以克服最大文件上载限制)。将第一个表单发布到iframe,使用上面的内容监控其进度,完成后,将第二个表单发布到iframe,依此类推。

或者使用Java / Flash解决方案。他们对帖子的处理方式更加灵活......

作者: Oli 发布者: 03.10.2008 10:41

32

70936 作者的声誉

A solution I found was to have the <form> target a hidden iFrame. The iFrame can then run JS to display to the user that it's complete (on page load).

作者: Darryl Hein 发布者: 18.10.2008 07:30

109

0 作者的声誉

我建议使用Fine Uploader插件来实现此目的。你的JavaScript代码是:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});
作者: pixxaar 发布者: 21.11.2008 04:38

32

1470 作者的声誉

I've written this up in a Rails environment. It's only about five lines of JavaScript, if you use the lightweight jQuery-form plugin.

The challenge is in getting AJAX upload working as the standard remote_form_for doesn't understand multi-part form submission. It's not going to send the file data Rails seeks back with the AJAX request.

That's where the jQuery-form plugin comes into play.

Here’s the Rails code for it:

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

Here’s the associated JavaScript:

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

And here’s the Rails controller action, pretty vanilla:

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

I’ve been using this for the past few weeks with Bloggity, and it’s worked like a champ.

作者: wbharding 发布者: 13.08.2009 10:44

83

6264 作者的声誉

这个AJAX文件上传jQuery插件上传文件somehwere,并将响应传递给回调,没有别的。

  • 它不依赖于特定的HTML,只需给它一个 <input type="file">
  • 它不要求您的服务器以任何特定方式响应
  • 您使用的文件数量或页面上的位置无关紧要

- 使用尽可能少 -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- 或者多 -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});
作者: Jordan Feldstein 发布者: 29.07.2011 12:34

2449

26222 作者的声誉

使用HTML5,您可以使用Ajax和jQuery进行文件上传。不仅如此,您还可以使用HTML5进度标记(或div)执行文件验证(名称,大小和MIME类型)或处理progress事件。最近我不得不制作一个文件上传器,但我不想使用Flash或iframe或插件,经过一些研究后我想出了解决方案。

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

首先,如果需要,您可以进行一些验证。例如,.on('change')如果是文件:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

现在$.ajax()按下按钮点击提交:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

正如您所看到的,使用HTML5(以及一些研究)文件上传不仅可以实现,而且非常简单。尝试使用谷歌浏览器,因为每个浏览器都没有这些示例的HTML5组件。

作者: olanod 发布者: 06.01.2012 01:34

59

30343 作者的声誉

我一直在使用下面的脚本来上传恰好工作的图像。

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript的

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

说明

div上传完成后,我使用响应来显示上传动画和响应。

最好的部分是,当您使用此脚本时,您可以使用该文件发送额外的数据,如ids等。我extra-data在剧本中提到过它。

在PHP级别,这将作为普通文件上载。额外数据可以作为$_POST数据检索。

在这里,你没有使用插件和东西。您可以根据需要更改代码。你不是在这里盲目编码。这是任何jQuery文件上传的核心功能。实际上是Javascript。

作者: Techie 发布者: 25.01.2013 11:03

45

130055 作者的声誉

你可以很容易地在vanilla JavaScript中完成它。这是我当前项目的一个片段:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);
作者: mpen 发布者: 17.02.2013 09:34

23

353 作者的声誉

jQuery Uploadify is another good plugin which I have used before to upload files. The JavaScript code is as simple as the following: code. However, the new version does not work in Internet Explorer.

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

I have done a lot of searching and I have come to another solution for uploading files without any plugin and only with ajax. The solution is as below:

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}
作者: farnoush resa 发布者: 16.06.2013 09:49

31

1268 作者的声誉

Simple Ajax Uploader is another option:

https://github.com/LPology/Simple-Ajax-Uploader

  • Cross-browser -- works in IE7+, Firefox, Chrome, Safari, Opera
  • Supports multiple, concurrent uploads -- even in non-HTML5 browsers
  • No flash or external CSS -- just one 5Kb Javascript file
  • Optional, built-in support for fully cross-browser progress bars (using PHP's APC extension)
  • Flexible and highly customizable -- use any element as upload button, style your own progress indicators
  • No forms required, just provide an element that will serve as upload button
  • MIT license -- free to use in commercial project

Example usage:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});
作者: user1091949 发布者: 26.06.2013 01:12

8

1242 作者的声誉

You can use

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo

作者: Amit 发布者: 12.05.2014 10:10

13

207 作者的声誉

To upload file asynchronously with Jquery use below steps:

step 1 In your project open Nuget manager and add package (jquery fileupload(only you need to write it in search box it will come up and install it.)) URL: https://github.com/blueimp/jQuery-File-Upload

step 2 Add below scripts in the HTML files, which are already added to the project by running above package:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

step 3 Write file upload control as per below code:

<input id="upload" name="upload" type="file" />

step 4 write a js method as uploadFile as below:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

step 5 In ready function call element file upload to initiate the process as per below:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

step 6 Write MVC controller and Action as per below:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }
作者: ashish 发布者: 23.06.2014 08:18

9

4169 作者的声誉

Convert file to base64 using |HTML5's readAsDataURL() or some base64 encoder. Fiddle here

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

Then to retrieve:

window.open("data:application/octet-stream;base64," + base64);
作者: tnt-rox 发布者: 23.06.2014 06:50

42

19227 作者的声誉

我过去做过的最简单,最健壮的方法是简单地使用您的表单定位隐藏的iFrame标记 - 然后它将在iframe中提交而不重新加载页面。

也就是说,如果您不想使用插件,JavaScript或除HTML之外的任何其他形式的“魔术”。当然你可以将它与JavaScript或者你有什么相结合......

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

您还可以读取iframe的内容以onLoad获取服务器错误或成功响应,然后将其输出给用户。

Chrome,iFrame和onLoad

- 注意 - 如果您对上传/下载时如何设置UI阻止程序感兴趣,则只需继续阅读

目前,当用于传输文件时,Chrome不会触发iframe的onLoad事件。Firefox,IE和Edge都会激活onload事件以进行文件传输。

我发现Chrome的唯一解决方案是使用cookie。

基本上在上传/下载开始时这样做:

  • [客户端]开始间隔以查找cookie的存在
  • [服务器端]对文件数据执行任何操作
  • [服务器端]为客户端间隔设置cookie
  • [客户端] Interval查看cookie并将其用作onLoad事件。例如,您可以启动UI阻止程序,然后启动onLoad(或者在创建cookie时),删除UI阻止程序。

使用cookie是很难看的但它确实有效。

我下载了一个jQuery插件来处理Chrome的这个问题,你可以在这里找到

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

同样的基本原则也适用于上传。

要使用下载器(显然包括JS)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

And on the server side, just before transferring the file data, create the cookie

 setcookie('iDownloader', true, time() + 30, "/");

The plugin will see the cookie, and then trigger the onComplete callback.

作者: ArtisticPhoenix 发布者: 26.06.2014 04:43

45

3345 作者的声誉

您可以使用jQuery上传.ajax()

HTML:

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

使用Javascript:

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});
作者: Zayn Ali 发布者: 08.08.2014 02:59

88

1182 作者的声誉

为未来的读者做好准备。

异步文件上传

使用HTML5

如果支持FormDataFile API(HTML5功能),您可以使用该方法使用jQuery上传文件。$.ajax()

您也可以在没有FormData的情况下发送文件但无论是哪种方式都必须存在File API来处理文件,以便可以使用XMLHttpRequest(Ajax)发送文件。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

有关快速,纯JavaScript(无jQuery)示例,请参阅“ 使用FormData对象发送文件 ”。

倒退

当不支持HTML5(没有File API)时,唯一的其他纯JavaScript解决方案(没有Flash或任何其他浏览器插件)是隐藏的iframe技术,它允许在不使用XMLHttpRequest对象的情况下模拟异步请求。

它包括将iframe设置为带有文件输入的表单的目标。当用户提交请求并上传文件但响应显示在iframe内部而不是重新呈现主页面时。隐藏iframe使整个过程对用户透明并模拟异步请求。

如果操作正确,它应该在任何浏览器上虚拟工作,但它有一些警告如何从iframe获取响应。

在这种情况下,您可能更喜欢使用像Bifröst这样的包装器插件,它使用iframe技术,但也提供了一个jQuery Ajax传输,允许使用如下方法发送文件$.ajax()

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

插件

Bifröst只是一个小包装器,它为jQuery的ajax方法添加了后备支持,但许多上述插件如jQuery Form PluginjQuery File Upload包括从HTML5到不同后备的整个堆栈以及一些有用的功能来简化过程。根据您的需求和要求,您可能需要考虑裸实现或此插件中的任何一个。

作者: 404 发布者: 25.08.2014 02:17

6

1173 作者的声誉

在此处异步查找处理文件的上载过程https//developer.mozilla.org/en-US/docs/Using_files_from_web_applications

来自链接的示例

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>
作者: Allende 发布者: 08.07.2015 05:59

15

707 作者的声誉

var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

You can use form data to post all your values including images.

作者: Vivek Aasaithambi 发布者: 28.07.2015 01:39

3

936 作者的声誉

这是我的解决方案。

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

和js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

调节器

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    return Json(":)");
}
作者: Erick Langford Xenes 发布者: 03.11.2015 08:47

21

1430 作者的声誉

Here's just another solution of how to upload file (without any plugin)

Using simple Javascripts and AJAX (with progress-bar)

HTML part

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

JS part

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

PHP part

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

Here's the EXAMPLE application

作者: Siddhartha Chowdhury 发布者: 30.03.2016 04:48

8

1148 作者的声誉

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

View more details

作者: Daniel Nyamasyo 发布者: 19.07.2016 05:18

8

403 作者的声誉

Sample: If you use jQuery, you can do easy to an upload file. This is a small and strong jQuery plugin, http://jquery.malsup.com/form/.

Example

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

I hope it would be helpful

作者: MEAbid 发布者: 14.10.2016 07:17

3

58072 作者的声誉

使用HTML5JavaScript,上传异步很容易,我创建上传逻辑和你的html,这不是完全工作,因为它需要api,但演示它如何工作,如果你/upload从你的网站的根调用端点,这段代码应该适合你:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}
<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

还有一些关于XMLHttpReques的更多信息:

XMLHttpRequest对象

所有现代浏览器都支持XMLHttpRequest对象。XMLHttpRequest对象可用于在后台与Web服务器交换数据。这意味着可以更新网页的各个部分,而无需重新加载整个页面。


创建XMLHttpRequest对象

所有现代浏览器(Chrome,Firefox,IE7 +,Edge,Safari,Opera)都有一个内置的XMLHttpRequest对象。

创建XMLHttpRequest对象的语法:

variable = new XMLHttpRequest();


跨域访问

出于安全原因,现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的XML文件必须位于同一服务器上。

W3Schools上的示例都是位于W3Schools域的所有开放XML文件。

如果要在自己的某个网页上使用上述示例,则加载的XML文件必须位于您自己的服务器上。

欲了解更多详情,您可以继续阅读在这里 ...

作者: Alireza 发布者: 12.03.2018 12:32

2

6088 作者的声誉

您可以通过JavaScript 使用较新的 Fetch API。像这样:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

优点:所有现代浏览器都支持 Fetch API ,因此您无需导入任何内容。另请注意,fetch()返回一个Promise,然后使用.then(..code to handle response..)异步处理。

作者: BlackBeard 发布者: 21.05.2018 10:14

8

13089 作者的声誉

A modern approach without Jquery is to use the FileList object you get back from <input type="file"> when user selects a file(s) and then use Fetch to post the FileList wrapped around a FormData object.

// The input DOM element
const inputElement = document.querySelector('input');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // Post to server
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});
作者: Alister 发布者: 17.08.2018 11:47

2

69 作者的声誉

你可以使用JavaScript或jQuery进行异步多文件上传,而不使用任何插件。您还可以在进度控件中显示文件上载的实时进度。我遇到过两个不错的链接 -

  1. 基于ASP.NET Web窗体的多文件上传功能与进度条
  2. 基于ASP.NET MVC的多文件上传在jQuery中制作

服务器端语言是C#,但您可以进行一些修改,使其与PHP等其他语言一起使用。

文件上传ASP.NET Core MVC:

在html中的View create file upload control中:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

现在在控制器中创建操作方法:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

hostingEnvironment变量属于IHostingEnvironment类型,可以使用依赖注入将其注入控制器,如:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}
作者: Joe Clinton 发布者: 29.08.2018 07:51

7

417 作者的声誉

You can pass additional parameters along with file name on making asynchronous upload using XMLHttpRequest (without flash and iframe dependency). Append the additional parameter value with FormData and send the upload request.


var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

Also, Syncfusion JavaScript UI file upload provides solution for this scenario simply using event argument. you can find documentation here and further details about this control here enter link description here

作者: Karthik Ravichandran 发布者: 14.11.2018 12:42

2

3508 作者的声誉

您还可以考虑使用https://uppy.io之类的东西。

它可以在不离开页面的情况下进行文件上传,并提供一些奖励,如拖放,在浏览器崩溃/片状网络的情况下恢复上传,以及从例如Instagram导入。它是开源的,不依赖于jQuery / React / Angular / Vue,但可以与它一起使用。免责声明:作为其创作者,我有偏见;)

作者: kvz 发布者: 21.12.2018 09:00

3

55 作者的声誉

您可以使用以下代码。

async: false(true)
作者: Hauto Sagarin 发布者: 08.04.2019 12:14
32x32