Как я могу загружать файлы асинхронно?
Я хотел бы загрузить файл асинхронно с 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 для загрузки файлов.
31 ответ
С HTML5 вы можете загружать файлы с помощью Ajax и jQuery. Мало того, вы можете выполнять проверку файлов (имя, размер и тип MIME) или обрабатывать событие progress с помощью тега прогресса 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 отправляет с нажатием кнопки:
$(':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 доступны не во всех браузерах.
Существуют различные готовые плагины для загрузки файлов для jQuery.
Загрузка такого рода хаков не доставляет удовольствия, поэтому людям нравится использовать готовые решения.
Вот несколько
- JQuery File Uploader
- Плагин для загрузки нескольких файлов
- Мини-загрузка нескольких файлов
- Загрузка файла jQuery
Вы можете искать другие проекты на NPM (используя "jquery-plugin" в качестве ключевого слова) или на Github.
Обновление 2019 года: все еще зависит от браузеров, которые вы используете.
Важная вещь, чтобы понять с "новым" HTML5 file API это не поддерживается до IE 10. Если конкретный рынок, к которому вы стремитесь, имеет склонность выше среднего уровня к старым версиям Windows, у вас может не быть к нему доступа.
По состоянию на 2017 год около 5% браузеров - это IE 6, 7, 8 или 9. Если вы идете в крупную корпорацию (например, это инструмент B2B или то, что вы предоставляете для обучения), это число может резко возрасти. В 2016 году я работал с компанией, использующей IE8, на более чем 60% своих машин.
Сейчас 2019 год, почти через 11 лет после моего первоначального ответа. IE9 и ниже находятся на глобальном уровне около отметки 1%, но все еще есть кластеры более высокого использования.
Важный вывод из этого - какой бы ни была функция - это проверить, какой браузер используют ваши пользователи. Если вы этого не сделаете, вы извлечете быстрый и мучительный урок о том, почему "работает для меня" недостаточно хорошо в доставке клиенту. caniuse - полезный инструмент, но обратите внимание, откуда они берут свою демографию. Они могут не совпадать с вашими. Это никогда не бывает правдой, чем корпоративная среда.
Мой ответ от 2008 года следует.
Однако существуют жизнеспособные не-JS методы загрузки файлов. Вы можете создать на странице iframe (который вы скрываете с помощью CSS), а затем настроить таргетинг своей формы для публикации на этом iframe. Главная страница не должна двигаться.
Это "настоящий" пост, поэтому он не полностью интерактивный. Если вам нужен статус, вам нужно что-то на стороне сервера для обработки этого. Это сильно зависит от вашего сервера. ASP.NET имеет более приятные механизмы. PHP не работает, но вы можете использовать модификации Perl или Apache, чтобы обойти это.
Если вам нужно несколько загрузок файлов, лучше делать каждый файл по одному (чтобы преодолеть максимальные ограничения на загрузку файлов). Отправьте первую форму в iframe, следите за ее продвижением, используя приведенное выше, и после ее завершения отправьте вторую форму в iframe и т. Д.
Или используйте решение Java/Flash. Они намного более гибки в том, что они могут делать со своими постами...
Я рекомендую использовать плагин Fine Uploader для этой цели. Ваш JavaScript код будет:
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
Примечание. Этот ответ устарел, теперь можно загружать файлы с помощью XHR.
Вы не можете загружать файлы, используя XMLHttpRequest (Ajax). Вы можете имитировать эффект, используя iframe или Flash. Отличный плагин jQuery Form, который отправляет ваши файлы через iframe, чтобы получить эффект.
Подведение итогов для будущих читателей.
Асинхронная загрузка файлов
С HTML5
Вы можете загружать файлы с помощью jQuery, используя $.ajax() метод, если поддерживается FormData и File API (обе функции HTML5).
Вы также можете отправлять файлы без FormData, но для обработки файлов таким образом, чтобы они могли быть отправлены с XMLHttpRequest (Ajax), должен присутствовать API-интерфейс File File.
$.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 - это всего лишь небольшая оболочка, которая добавляет поддержку отката в метод jjuery ajax, но многие из вышеупомянутых плагинов, таких как плагин jQuery Form или jQuery File Upload, включают целый стек из HTML5 для различных откатов и некоторые полезные функции для облегчения процесса. В зависимости от ваших потребностей и требований вы можете рассмотреть пустую реализацию или один из этих плагинов.
Этот плагин для загрузки AJAX-файлов jQuery загружает файл где-то еще и передает ответ на обратный вызов, ничего больше.
- Это не зависит от конкретного 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');
}
});
Я использовал приведенный ниже скрипт для загрузки изображений, который работает нормально.
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 показать анимацию загрузки и ответ после завершения загрузки.
Самое приятное, что при использовании этого сценария вы можете отправлять дополнительные данные, такие как идентификаторы и т. Д. Вместе с файлом. Я упомянул это extra-data как в сценарии.
На уровне PHP это будет работать как обычная загрузка файлов. дополнительные данные могут быть получены как $_POST данные.
Здесь вы не используете плагин и прочее. Вы можете изменить код, как вы хотите. Вы не слепо кодируете здесь. Это основная функциональность любой загрузки файла jQuery. На самом деле Javascript.
Я встречал несколько действительно мощных библиотек для загрузки файлов на основе jQuery. Проверьте это:
Вы можете сделать это в обычном 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);
Вы можете загрузить просто с помощью 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) {
// ...
}
});
}));
});
Самый простой и надежный способ, которым я занимался в прошлом, - это просто нацелить скрытый тег 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
-Примечание- вам нужно только продолжать чтение, если вы заинтересованы в том, как настроить блокировщик пользовательского интерфейса при загрузке / загрузке
В настоящее время Chrome не вызывает событие onLoad для iframe, когда оно используется для передачи файлов. Firefox, IE и Edge запускают событие onload для передачи файлов.
Единственным решением, которое я нашел для Chrome, было использование cookie.
Чтобы сделать это в основном, когда начата загрузка / выгрузка:
- [Клиентская сторона] Начать интервал, чтобы искать наличие куки
- [Server Side] Делайте все, что вам нужно с данными файла
- [Server Side] Установить cookie для клиентского интервала
- [Сторона клиента] Интервал видит cookie и использует его как событие onLoad. Например, вы можете запустить блокировщик пользовательского интерфейса, а затем onLoad (или при создании 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 Перезвоните.
Простой Ajax Uploader - это еще один вариант:
https://github.com/LPology/Simple-Ajax-Uploader
- Кросс-браузер - работает в IE7+, Firefox, Chrome, Safari, Opera
- Поддержка нескольких одновременных загрузок - даже в браузерах, отличных от HTML5
- Нет флэш-памяти или внешнего CSS - только один 5Kb файл Javascript
- Дополнительная встроенная поддержка полностью кросс-браузерных индикаторов прогресса (с использованием PHP-расширения APC)
- Гибкость и широкие возможности настройки - используйте любой элемент в качестве кнопки загрузки, используйте собственные индикаторы прогресса
- Не требуется никаких форм, просто предоставьте элемент, который будет служить кнопкой загрузки
- Лицензия MIT - бесплатна для использования в коммерческом проекте
Пример использования:
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
}
});
Я написал это в среде Rails. Это всего около пяти строк JavaScript, если вы используете легкий плагин jQuery-формы.
Задача состоит в том, чтобы загрузить AJAX как стандарт remote_form_for не понимает многочастную форму. Он не собирается отправлять данные файла, которые Rails ищет обратно с помощью запроса AJAX.
Вот где плагин jQuery-формы вступает в игру.
Вот код 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, и это работало как чемпион.
Решение, которое я нашел, состояло в том, чтобы <form> нацелить скрытый кадр Затем iFrame может запустить JS, чтобы показать пользователю, что он завершен (при загрузке страницы).
Вот еще одно решение о том, как загрузить файл (без какого-либо плагина)
Использование простых 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";
}
?>
jQuery Uploadify - еще один хороший плагин, который я использовал для загрузки файлов. Код JavaScript так же прост: код. Однако новая версия не работает в 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) {
// ...
}
});
Я много занимался поиском и нашел другое решение для загрузки файлов без каких-либо плагинов и только с помощью 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);
}
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){ }
});
Вы можете использовать данные формы, чтобы опубликовать все ваши значения, включая изображения.
Современный подход без Jquery заключается в использовании объекта FileList, с которого вы получаете ответ <input type="file"> когда пользователь выбирает файл (ы) и затем использует Fetch, чтобы опубликовать FileList, обернутый вокруг объекта FormData.
// 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
});
});
Чтобы загрузить файл асинхронно с Jquery, используйте следующие шаги:
Шаг 1 В вашем проекте откройте диспетчер Nuget и добавьте пакет (jquery fileupload(только вам нужно написать его в поле поиска, он появится и установить его). 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
};
}
}
Здесь вы можете увидеть решение с рабочим демо, которое позволяет вам просматривать и отправлять файлы форм на сервер. В вашем случае вам нужно использовать Ajax для облегчения загрузки файлов на сервер:
<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>
Представляемые данные являются форматы данных. В вашем jQuery используйте функцию отправки формы вместо нажатия кнопки, чтобы отправить файл формы, как показано ниже.
$(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");
});
});
});
Это моё решение.
<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(":)");
}
Ты можешь использовать
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
Пример: если вы используете 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
}
});
Я надеюсь, что это будет полезно
Конвертируйте файл в base64, используя readAsDataURL() HTML5 или какой-нибудь кодировщик 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);
Вы можете передать дополнительные параметры вместе с именем файла при выполнении асинхронной загрузки с использованием XMLHttpRequest (без зависимости flash и iframe). Добавьте значение дополнительного параметра с помощью FormData и отправьте запрос на загрузку.
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
});
Кроме того, загрузка файла интерфейса пользователя Syncfusion JavaScript предоставляет решение для этого сценария, просто используя аргумент события. вы можете найти документацию здесь и более подробную информацию об этом элементе управления здесь, введите описание ссылки здесь
Посмотрите, как обрабатывать процесс загрузки файла, асинхронно здесь: 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>
Вы можете использовать более новый Fetch API с помощью JavaScript. Как это:
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..) асинхронно.
Используя HTML5 и JavaScript, выгрузка асинхронных файлов довольно проста, я создаю логику выгрузки вместе с вашим 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 можно использовать для скрытого обмена данными с веб-сервером. Это означает, что можно обновить части веб-страницы, не перезагружая всю страницу.
Создайте объект XMLHttpRequest
Все современные браузеры (Chrome, Firefox, IE7+, Edge, Safari, Opera) имеют встроенный объект XMLHttpRequest.
Синтаксис для создания объекта XMLHttpRequest:
переменная = новый XMLHttpRequest();
Доступ через домены
По соображениям безопасности современные браузеры не разрешают доступ через домены.
Это означает, что и веб-страница, и файл XML, который она пытается загрузить, должны находиться на одном сервере.
Во всех примерах на W3Schools открываются файлы XML, расположенные в домене W3Schools.
Если вы хотите использовать приведенный выше пример на одной из своих веб-страниц, загружаемые вами XML-файлы должны находиться на вашем собственном сервере.
Для более подробной информации, вы можете продолжить чтение здесь...
Вы также можете использовать что-то вроде https://uppy.io/. Он выполняет загрузку файлов без перехода со страницы и предлагает несколько бонусов, таких как перетаскивание, возобновление загрузки в случае сбоя браузера / нестабильных сетей и импорт, например, из Instagram. Это открытый исходный код и не зависит от jQuery/React/Angular/Vue, но может использоваться с ним. Отказ от ответственности: как его создатель я предвзято;) у