Оператор == всегда предназначен для сравнения ссылок на объекты, тогда как метод сравнения строк .equals () переопределяется для сравнения содержимого:
String s1 = new String("abc");
String s2 = new String("abc");
System.out.println(s1 == s2); // It prints false (reference comparison)
System.out.println(s1.equals(s2)); // It prints true (content comparison)
Использование HTML5 и JavaScript, загрузка async довольно проста, я создаю логику загрузки вместе с вашим html, это не полностью работает, так как ему нужно api, но демонстрируйте, как это работает, если у вас есть конечная точка с именем /upload
от root вашего сайта, этот код должен работать для вас:
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 может использоваться для обмена данными с веб-сервером за кулисами. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.
Создать объект XMLHttpRequest
Все современные браузеры (Chrome, Firefox, IE7 +, Edge, Safari, Opera) имеют встроенный объект XMLHttpRequest.
Синтаксис для создания объекта XMLHttpRequest:
variable = new XMLHttpRequest ();
Доступ во всех доменах
Из соображений безопасности современные браузеры не разрешают доступ через домены.
Это означает, что и веб-страница, и файл XML, который она пытается загрузить, должны быть расположены на одном сервере.
В примерах в W3Schools все файлы XML, расположенные в домене W3Schools.
Если вы хотите использовать пример выше на одной из ваших собственных веб-страниц, загружаемые файлы XML должны находиться на вашем собственном сервере.
Подробнее , вы можете продолжить чтение здесь ...
Вы можете использовать
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
С помощью HTML5 вы можете выполнять загрузку файлов с помощью Ajax и jQuery. Кроме того, вы можете выполнять проверки файлов (имя, размер и тип MIME) или обрабатывать событие прогресса с тегом прогресса HTML5 (или div). Недавно мне пришлось сделать загрузчик файлов, но я не хотел использовать Flash , а также iframes или плагины, и после некоторых исследований я придумал решение.
HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
Во-первых, вы можете сделать некоторую проверку, если хотите. Например, в событии onChange файла:
$(':file').on('change', function() {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k')
}
// Also see .name, .type
});
Теперь Ajax submit с нажатием кнопки:
$(':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 (и некоторыми исследование) загрузка файлов не только становится возможной, но и супер легко. Попробуйте Google Chrome , так как некоторые из компонентов HTML5 примеров недоступны в каждом браузере.
Вы можете использовать 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));
}
Преимущество: API Fetch поддерживается всеми современными браузерами, поэтому вам не нужно ничего импортировать. Также обратите внимание, что fetch () возвращает Promise , который затем обрабатывается с помощью .then(..code to handle response..)
асинхронно.
Обход для будущих читателей.
Вы можете загружать файлы с помощью jQuery с помощью метода $.ajax()
, если Поддерживаются форматыDataData и API файлов (обе функции HTML5).
Вы также можете отправлять файлы без FormData , но в любом случае 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 transport , позволяющий отправлять файлы только с помощью метода $.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 - это всего лишь небольшая обертка, которая добавляет резервная поддержка метода ajax jQuery, но многие из вышеупомянутых плагинов, таких как jQuery Form Plugin или jQuery File Upload , включают весь стек из HTML5 в различные резервные копии и некоторые полезные функции для облегчения из процесса. В зависимости от ваших потребностей и требований вы можете захотеть рассмотреть голые версии или любой из этих плагинов.
contentType: false
. Когда я не отправил это с хром, тип содержимого формы был аннулирован jQuery.
– ash
18 August 2015 в 22:44
.done()
и .fail()
. Кроме того, пример без использования FormData
и списка pro / cons был бы потрясающим.
– Zero3
19 December 2015 в 19:10
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
– candlejack
26 December 2016 в 00:15
Я нашел решение, чтобы цель <form>
скрывала iFrame. Затем iFrame может запустить JS, чтобы показать пользователю, что он завершен (при загрузке страницы).
Это мое решение.
<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(":)");
}
Существуют различные готовые плагины для выполнения загрузки файла для jQuery.
Выполнение такого рода загрузочных хаков - это не приятный опыт, поэтому людям нравится использовать готовые решения.
Вот несколько:
Вы можете искать другие проекты на NPM (используя " jquery-plugin "в качестве ключевого слова) или на Github.
JQuery File Uploader
для нескольких видеороликов ..? будет ли это поддерживать ..?
– Mr world wide
13 February 2017 в 12:45
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){ }
});
Вы можете использовать данные формы для публикации всех ваших значений, включая изображения.
cache: false
является избыточным по запросу POST
в качестве кешей POST
никогда i>.
– Gone Coding
10 August 2015 в 09:10
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
– candlejack
26 December 2016 в 00:28
Я столкнулся с несколькими действительно мощными jQuery-файлами для загрузки файлов. Проверьте их:
jQuery Uploadify - еще один хороший плагин, который я раньше использовал для загрузки файлов. Код JavaScript прост, как показано ниже: code. Тем не менее, новая версия не работает в Internet & nbsp; 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) {
// ...
}
});
Я много искал, и я пришел к другому решению для загрузки файлов без какого-либо плагина и только с ajax. Решение таково:
$(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);
}
Этот AJAX-файл загружает плагин jQuery загружает файл somehwere и передает ответ на обратный вызов, ничего больше.
<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');
}
});
Это старый вопрос, но ответа на правильный ответ у него нет, поэтому:
Вы пробовали jQuery-File-Upload ?
Здесь является примером из ссылки выше -> 1 , которая может решить вашу проблему:
$('#fileupload').fileupload({
add: function (e, data) {
var that = this;
$.getJSON('/example/url', function (result) {
data.formData = result; // e.g. {id: 123}
$.blueimp.fileupload.prototype
.options.add.call(that, e, data);
});
}
});
Чтобы асинхронно загружать файл с помощью Jquery, выполните следующие шаги:
шаг 1 В вашем проекте откройте менеджер Nuget и добавьте пакет (jquery fileupload (нужно только записать его в поле поиска, он появится и установит it.)) URL: https://github.com/blueimp/jQuery-File-Upload
Шаг 2 Добавьте ниже сценарии в файлы HTML, которые уже добавлены в проект, выполнив над пакетом:
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
Шаг 3 Запишите управление загрузкой файлов в соответствии с приведенным ниже кодом:
<input id="upload" name="upload" type="file" />
шаг 4 напишите js-метод как uploadFile, как показано ниже:
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 } }); };
шаг 5 В процессе загрузки файла элементов готовой функции, чтобы инициировать процесс, как показано ниже:
$(document).ready(function() { uploadFile($('#upload')); });
Шаг 6 Запишите контроллер MVC и действие, как показано ниже:
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 }; } }
Ищите . Загрузите процесс загрузки для файла, асинхронно здесь: 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>
Важно понять, что «новый» API HTML5 file
- это не поддерживается до IE 10 . Если конкретный рынок, на который вы нацеливаетесь, имеет более высокую, чем среднюю, предварительную наклонность к более старым версиям Windows, у вас может не быть доступа к нему.
Переход к 2017 году примерно в 5% браузеров является одним из IE 6, 7, 8 или 9. Если вы направляетесь в крупную корпорацию (например, это инструмент B2B или что-то, что вы доставляете для обучения), это число может ракета. Всего несколько месяцев назад - в 2016 году - я имел дело с компанией, использующей IE8 на более чем 60% своих машин.
Итак, прежде чем что-либо делать: проверьте, какой браузер использует ваш пользователь , Если вы этого не сделаете, вы научитесь быстрому и мучительному уроку в том, почему «работает для меня» недостаточно хорош для доставки клиенту.
Мой ответ от 2008 года.
Однако существуют жизнеспособные не-JS-методы загрузки файлов. Вы можете создать iframe на странице (которую вы скрываете с помощью CSS), а затем настроить таргетинг своей формы для публикации в iframe. На главной странице не нужно двигаться.
Это «настоящая» почта, поэтому она не является полностью интерактивной. Если вам нужен статус, вам нужно что-то серверное для его обработки. Это зависит от вашего сервера. ASP.NET имеет более удобные механизмы. PHP plain не работает, но вы можете использовать Perl или модификации Apache, чтобы обойти его.
Если вам нужно несколько загрузок файлов, лучше делать каждый файл по одному ( для преодоления максимальных пределов загрузки файлов). Отправляйте первую форму в iframe, отслеживайте ее ход, используя вышеприведенное и когда он закончил, разместите вторую форму в iframe и т. Д.
Или используйте решение Java / Flash. Они намного более гибки в том, что они могут делать со своими постами ...
Образец: если вы используете jQuery, вы можете легко загрузить файл. Это небольшой и сильный плагин jQuery, http://jquery.malsup.com/form/ .
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
}
});
Надеюсь, это было бы полезно
ondrop
вы можете сделать var file = e.dataTransfer.files[0]
– mpen
3 April 2013 в 16:35
addEventListener
не является кросс-браузером.
– Mark
22 September 2013 в 21:49
Я написал это в среде Rails . Это всего лишь пять строк JavaScript, если вы используете легкий плагин jQuery-формы.
Задача заключается в том, что загрузка AJAX работает, поскольку стандарт remote_form_for
не понимает представления нескольких частей. Он не собирается отправлять данные файла. Rails ищет запрос AJAX.
Именно здесь вступает в игру плагин jQuery-form.
Вот код Rails для него:
<% 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 %>
Вот соответствующий 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.
},
});
});
И вот действие контроллера Rails, довольно ваниль:
@image = Image.new(params[:image_form])
@image.save
render :text => @image.public_filename
Я использовал это в течение последних нескольких недель с Bloggity, и он работал как чемпион.
Для этой цели я рекомендую использовать плагин Fine Uploader . Ваш код JavaScript
будет:
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
Вот еще одно решение по загрузке файла (без какого-либо плагина)
Использование простых Javascripts и AJAX (с индикатором выполнения)
Часть HTML
<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
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
<?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";
}
?>
Самый простой и самый надежный способ, который я сделал в прошлом, - просто нацелить скрытый тег 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, iFrames и onLoad
-note - вам нужно только читать, если вы заинтересованы в том, как настроить блокиратор пользовательского интерфейса при загрузке / загрузке
В настоящее время Chrome не запускает событие onLoad для iframe, когда он используется для передачи файлов. Firefox, IE и Edge запускают событие onload для передачи файлов.
Единственным решением, которое я нашел для Chrome, было использование cookie.
Для этого в основном при загрузке / загрузке:
Использование файла 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');
});
И на стороне сервера, непосредственно перед передачей данных файла, создайте файл cookie
setcookie('iDownloader', true, time() + 30, "/");
Плагин увидит файл cookie, а затем вызовет обратный вызов onComplete
.
Преобразовать файл в base64, используя | HTML5 readAsDataURL () или некоторый кодер base64 . Здесь скрипт
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
Затем для извлечения:
window.open("data:application/octet-stream;base64," + base64);
Простой загрузчик Ajax - это еще одна опция:
https://github.com/LPology/Simple-Ajax-Uploader
Пример использования:
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
}
});
IE7+
! Попробуйте это сейчас. благодаря
– Pierre
28 June 2014 в 11:53
Вы можете просто загрузить 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) {
// ...
}
});
}));
});