JQuery Ajax Загрузка файла
Могу ли я использовать следующий код jQuery для загрузки файла с использованием метода post запроса Ajax?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
Если это возможно, нужно ли заполнять часть "данные"? Это правильный путь? Я размещаю файл только на стороне сервера.
Я гуглил, но я обнаружил, что это плагин, а в моем плане я не хочу его использовать. По крайней мере, на данный момент.
29 ответов
Загрузка файла невозможна через ajax. Вы можете загрузить файл, не обновляя страницу, используя IFrame. Вы можете проверить более подробно здесь
ОБНОВИТЬ:
В XHR2 поддерживается загрузка файлов через AJAX. Например, через объект FormData, но, к сожалению, он не поддерживается всеми / старыми браузерами.
Поддержка FormData начинается со следующих версий настольных браузеров. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
Для более подробной информации смотрите ссылку MDN
Iframes больше не нужен для загрузки файлов через ajax. Я недавно сделал это сам. Проверьте эти страницы:
Использование загрузки файлов HTML5 с AJAX и jQuery
http://dev.w3.org/2006/webapi/FileAPI/
Обновил ответ и убрал его. Используйте функцию getSize для проверки размера или функцию getType для проверки типов. Добавлен прогрессбар html и css код.
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
return this.file.type;
};
Upload.prototype.getSize = function() {
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
// add assoc key values, this will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
url: "script",
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
// your callback here
},
error: function (error) {
// handle error
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
// update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};
Как использовать класс Upload
//Change id to your id
$("#ingredient_file").on("change", function (e) {
var file = $(this)[0].files[0];
var upload = new Upload(file);
// maby check size or type here with upload.getSize() and upload.getType()
// execute upload
upload.doUpload();
});
Прогрессбар HTML-код
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
Прогрессбар css код
#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status {
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
}
Возможна запись в Ajax и загрузка файла. я использую jQuery $.ajax функция для загрузки моих файлов. Я пытался использовать объект XHR, но не смог получить результаты на стороне сервера с PHP.
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});
Как видите, вы должны создать объект FormData, пустой или из (сериализованный? - $('#yourForm').serialize()) существующей формы, а затем прикрепите входной файл.
Вот дополнительная информация: - Как загрузить файл с использованием jQuery.ajax и FormData- Загрузка файлов с помощью jQuery, объект FormData предоставляется без имени файла, запрос GET
Для процесса PHP вы можете использовать что-то вроде этого:
//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);
if($fileError == UPLOAD_ERR_OK){
//Processes your file here
}else{
switch($fileError){
case UPLOAD_ERR_INI_SIZE:
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_FORM_SIZE:
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_PARTIAL:
$message = 'Error: no terminó la acción de subir el archivo.';
break;
case UPLOAD_ERR_NO_FILE:
$message = 'Error: ningún archivo fue subido.';
break;
case UPLOAD_ERR_NO_TMP_DIR:
$message = 'Error: servidor no configurado para carga de archivos.';
break;
case UPLOAD_ERR_CANT_WRITE:
$message= 'Error: posible falla al grabar el archivo.';
break;
case UPLOAD_ERR_EXTENSION:
$message = 'Error: carga de archivo no completada.';
break;
default: $message = 'Error: carga de archivo no completada.';
break;
}
echo json_encode(array(
'error' => true,
'message' => $message
));
}
Простая форма загрузки
<script>
//form Submit
$("form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'fileUpload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
</script><!--Upload Form-->
<form>
<table>
<tr>
<td colspan="2">File Upload</td>
</tr>
<tr>
<th>Select File </th>
<td><input id="csv" name="csv" type="file" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit"/>
</td>
</tr>
</table>
</form>Я опаздываю на это, но я искал решение для загрузки изображений на основе ajax, и ответ, который я искал, был немного разбросан по всему посту. Решение, на котором я остановился, включало объект FormData. Я собрал основную форму кода, который я собрал. Вы можете увидеть, как он демонстрирует, как добавить настраиваемое поле в форму с помощью fd.append(), а также как обрабатывать данные ответов, когда выполняется запрос ajax.
Загрузить HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function submitForm() {
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("label", "WEBUPLOAD");
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
console.log("PHP Output:");
console.log( data );
});
return false;
}
</script>
</head>
<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label><br>
<input type="file" name="file" required />
<input type="submit" value="Upload" />
</form>
<div id="output"></div>
</body>
</html>
В случае, если вы работаете с php, вот способ обработать загрузку, который включает использование обоих пользовательских полей, показанных в приведенном выше html.
upload.php
<?php
if ($_POST["label"]) {
$label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
} else {
$filename = $label.$_FILES["file"]["name"];
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("uploads/" . $filename)) {
echo $filename . " already exists. ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"],
"uploads/" . $filename);
echo "Stored in: " . "uploads/" . $filename;
}
}
} else {
echo "Invalid file";
}
?>
AJAX-загрузка действительно возможна с XMLHttpRequest(). Нет необходимости в фреймах. Процесс загрузки может быть показан.
Подробности см. В ответе на вопрос /questions/7088970/progress-zagruzki-jquery-i-zagruzka-fajlov-ajax/7088986#7088986 на вопрос о прогрессе загрузки jQuery и загрузке файла AJAX.
Вот как я получил это работает:
HTML
<input type="file" id="file">
<button id='process-file-button'>Process</button>
JS
$('#process-file-button').on('click', function (e) {
let files = new FormData(), // you can consider this as 'data bag'
url = 'yourUrl';
files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'
$.ajax({
type: 'post',
url: url,
processData: false,
contentType: false,
data: files,
success: function (response) {
console.log(response);
},
error: function (err) {
console.log(err);
}
});
});
PHP
if (isset($_FILES) && !empty($_FILES)) {
$file = $_FILES['fileName'];
$name = $file['name'];
$path = $file['tmp_name'];
// process your file
}
На чистом js проще
async function saveFile(inp)
{
let formData = new FormData();
formData.append("file", inp.files[0]);
await fetch('/upload/somedata', {method: "POST", body: formData});
alert('success');
}<input type="file" onchange="saveFile(this)" >- На стороне сервера вы можете прочитать исходное имя файла (и другую информацию), которое автоматически включается в запрос.
- Вам НЕ нужно устанавливать заголовок Content-Type на multipart/form-data, браузер установит его автоматически
- Эти решения должны работать во всех основных браузерах.
Вот более проработанный сниппет с обработкой ошибок и дополнительной отправкой json
async function saveFile(inp)
{
let user = { name:'john', age:34 };
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
try {
let r = await fetch('/upload/image', {method: "POST", body: formData});
console.log('HTTP response code:',r.status);
alert('success');
} catch(e) {
console.log('Huston we have problem...:', e);
}
}<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>Используйте FormData. Очень хорошо работает:-) ...
var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit
$.ajax({
url: '/your-form-processing-page-url-here',
type: 'POST',
data: jform,
dataType: 'json',
mimeType: 'multipart/form-data', // this too
contentType: false,
cache: false,
processData: false,
success: function(data, status, jqXHR){
alert('Hooray! All is well.');
console.log(data);
console.log(status);
console.log(jqXHR);
},
error: function(jqXHR,status,error){
// Hopefully we should never reach here
console.log(jqXHR);
console.log(status);
console.log(error);
}
});
Если вы хотите сделать это так:
$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
if( progressEvent.lengthComputable) {
var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
if( upload) {
console.log( percent + ' uploaded');
} else {
console.log( percent + ' downloaded');
}
}
})
.done( function() {
console.log( 'Finished upload');
});
чем
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
может быть вашим решением.
$("#submit_car").click( function() {
var formData = new FormData($('#car_cost_form')[0]);
$.ajax({
url: 'car_costs.php',
data: formData,
async: false,
contentType: false,
processData: false,
cache: false,
type: 'POST',
success: function(data)
{
},
}) return false;
});
edit: примечание contentype и данные процесса. Вы можете просто использовать это для загрузки файлов через Ajax...... отправка ввода не может быть вне элемента формы:)
2019 обновление:
HTML
<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>
JS
$(document).on('submit', '.fr', function(){
$.ajax({
type: 'post',
url: url, <--- you insert proper URL path to call your views.py function here.
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this) ,
success: function(data) {
console.log(data);
}
});
return false;
});
views.py
form = ThisForm(request.POST, request.FILES)
if form.is_valid():
text = form.cleaned_data.get("text")
example_image = request.FILES['example_image']
- Используйте скрытый iframe и установите цель вашей формы на имя этого iframe. Таким образом, при отправке формы обновляется только iframe.
- Зарегистрируйте обработчик события для события загрузки iframe, чтобы проанализировать ответ.
Больше подробностей в моем блоге: http://blog.manki.in/2011/08/ajax-fie-upload.html.
Я обработал их в простом коде. Вы можете скачать рабочую демо здесь
Для вашего случая это очень возможно. Я расскажу вам шаг за шагом, как вы можете загрузить файл на сервер, используя AJAX jquery.
Сначала давайте создадим файл HTML, чтобы добавить следующий элемент файла формы, как показано ниже.
<form action="" id="formContent" method="post" enctype="multipart/form-data" >
<input type="file" name="file" required id="upload">
<button class="submitI" >Upload Image</button>
</form>
Во-вторых, создайте файл jquery.js и добавьте следующий код для обработки отправки файлов на сервер.
$("#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("file successfully submitted");
},error: function(){
alert("okey");
}
});
});
});
Вот и все. Посмотреть больше
Использование FormData - это путь, на который указывают многие ответы. Вот немного кода, который отлично подходит для этой цели. Я также согласен с комментарием о вложении блоков AJAX для выполнения сложных обстоятельств. Включая e.PreventDefault(); по моему опыту делает код более совместимым с браузерами.
$('#UploadB1').click(function(e){
e.preventDefault();
if (!fileupload.valid()) {
return false;
}
var myformData = new FormData();
myformData.append('file', $('#uploadFile')[0].files[0]);
$("#UpdateMessage5").html("Uploading file ....");
$("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");
myformData.append('mode', 'fileUpload');
myformData.append('myid', $('#myid').val());
myformData.append('type', $('#fileType').val());
//formData.append('myfile', file, file.name);
$.ajax({
url: 'include/fetch.php',
method: 'post',
processData: false,
contentType: false,
cache: false,
data: myformData,
enctype: 'multipart/form-data',
success: function(response){
$("#UpdateMessage5").html(response); //.delay(2000).hide(1);
$("#UpdateMessage5").css("background","");
console.log("file successfully submitted");
},error: function(){
console.log("not okay");
}
});
});
Я реализовал выбор нескольких файлов с мгновенным предварительным просмотром и загрузкой после удаления ненужных файлов из предварительного просмотра через ajax.
Подробную документацию можно найти здесь: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
Демо: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/
Javascript:
$(document).ready(function(){
$('form').submit(function(ev){
$('.overlay').show();
$(window).scrollTop(0);
return upload_images_selected(ev, ev.target);
})
})
function add_new_file_uploader(addBtn) {
var currentRow = $(addBtn).parent().parent();
var newRow = $(currentRow).clone();
$(newRow).find('.previewImage, .imagePreviewTable').hide();
$(newRow).find('.removeButton').show();
$(newRow).find('table.imagePreviewTable').find('tr').remove();
$(newRow).find('input.multipleImageFileInput').val('');
$(addBtn).parent().parent().parent().append(newRow);
}
function remove_file_uploader(removeBtn) {
$(removeBtn).parent().parent().remove();
}
function show_image_preview(file_selector) {
//files selected using current file selector
var files = file_selector.files;
//Container of image previews
var imageContainer = $(file_selector).next('table.imagePreviewTable');
//Number of images selected
var number_of_images = files.length;
//Build image preview row
var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
'<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
'</tr> ');
//Add image preview row
$(imageContainer).html(imagePreviewRow);
if (number_of_images > 1) {
for (var i =1; i<number_of_images; i++) {
/**
*Generate class name of the respective image container appending index of selected images,
*sothat we can match images selected and the one which is previewed
*/
var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
$(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
$(imageContainer).append(newImagePreviewRow);
}
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
/**
* Allow only images
*/
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
/**
* Create an image dom object dynamically
*/
var img = document.createElement("img");
/**
* Get preview area of the image
*/
var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');
/**
* Append preview of selected image to the corresponding container
*/
preview.append(img);
/**
* Set style of appended preview(Can be done via css also)
*/
preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});
/**
* Initialize file reader
*/
var reader = new FileReader();
/**
* Onload event of file reader assign target image to the preview
*/
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
/**
* Initiate read
*/
reader.readAsDataURL(file);
}
/**
* Show preview
*/
$(imageContainer).show();
}
function remove_selected_image(close_button)
{
/**
* Remove this image from preview
*/
var imageIndex = $(close_button).attr('imageindex');
$(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}
function upload_images_selected(event, formObj)
{
event.preventDefault();
//Get number of images
var imageCount = $('.previewImage').length;
//Get all multi select inputs
var fileInputs = document.querySelectorAll('.multipleImageFileInput');
//Url where the image is to be uploaded
var url= "/upload-directory/";
//Get number of inputs
var number_of_inputs = $(fileInputs).length;
var inputCount = 0;
//Iterate through each file selector input
$(fileInputs).each(function(index, input){
fileList = input.files;
// Create a new FormData object.
var formData = new FormData();
//Extra parameters can be added to the form data object
formData.append('bulk_upload', '1');
formData.append('username', $('input[name="username"]').val());
//Iterate throug each images selected by each file selector and find if the image is present in the preview
for (var i = 0; i < fileList.length; i++) {
if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
var file = fileList[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
// Add the file to the request.
formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
}
}
// Set up the request.
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function () {
if (xhr.status === 200) {
var jsonResponse = JSON.parse(xhr.responseText);
if (jsonResponse.status == 1) {
$(jsonResponse.file_info).each(function(){
//Iterate through response and find data corresponding to each file uploaded
var uploaded_file_name = this.original;
var saved_file_name = this.target;
var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
file_info_container.append(file_name_input);
imageCount--;
})
//Decrement count of inputs to find all images selected by all multi select are uploaded
number_of_inputs--;
if(number_of_inputs == 0) {
//All images selected by each file selector is uploaded
//Do necessary acteion post upload
$('.overlay').hide();
}
} else {
if (typeof jsonResponse.error_field_name != 'undefined') {
//Do appropriate error action
} else {
alert(jsonResponse.message);
}
$('.overlay').hide();
event.preventDefault();
return false;
}
} else {
/*alert('Something went wrong!');*/
$('.overlay').hide();
event.preventDefault();
}
};
xhr.send(formData);
})
return false;
}
<html>
<head>
<title>Ajax file upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
$("#uploadimage").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "upload.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
alert(data);
}
});
}));
</script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
</body>
</html>
Чтобы получить все входные данные вашей формы, включая type="file", вам нужно использовать объект FormData. вы сможете увидеть содержимое formData в отладчике -> сеть -> заголовки после того, как отправите форму.
var url = "YOUR_URL";
var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);
$.ajax(url, {
method: 'post',
processData: false,
contentType: false,
data: formData
}).done(function(data){
if (data.success){
alert("Files uploaded");
} else {
alert("Error while uploading the files");
}
}).fail(function(data){
console.log(data);
alert("Error while uploading the files");
});
Да, вы можете, просто используйте javascript, чтобы получить файл, убедившись, что вы читаете файл как URL-адрес данных. Разберите материал перед base64, чтобы фактически получить данные, закодированные в base 64, а затем, если вы используете php или действительно какой-либо внутренний язык, вы можете декодировать данные base 64 и сохранить в файл, как показано ниже
Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
dataToBeSent = reader.result.split("base64,")[1];
$.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);
PHP:
file_put_contents('my.pdf', base64_decode($_POST["data"]));
Конечно, вы, вероятно, захотите провести некоторую проверку, например, проверить, с каким типом файла вы имеете дело, и все в таком духе, но это идея.
Чтобы загрузить файл, который пользователь отправил как часть формы, используя jquery, пожалуйста, следуйте приведенному ниже коду:
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
Затем отправьте объект данных формы на сервер.
Мы также можем добавить файл или блоб непосредственно в объект FormData.
data.append("myfile", myBlob, "filename.txt");
Вы можете использовать метод ajaxSubmit следующим образом:), когда вы выбираете файл, который нужно загрузить на сервер, отправьте его на сервер:)
$(document).ready(function () {
var options = {
target: '#output', // target element(s) to be updated with server response
timeout: 30000,
error: function (jqXHR, textStatus) {
$('#output').html('have any error');
return false;
}
},
success: afterSuccess, // post-submit callback
resetForm: true
// reset the form after successful submit
};
$('#idOfInputFile').on('change', function () {
$('#idOfForm').ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});
Если вы хотите загрузить файл, используя AJAX, вот код, который вы можете использовать для загрузки файла.
$(document).ready(function() {
var options = {
beforeSubmit: showRequest,
success: showResponse,
dataType: 'json'
};
$('body').delegate('#image','change', function(){
$('#upload').ajaxForm(options).submit();
});
});
function showRequest(formData, jqForm, options) {
$("#validation-errors").hide().empty();
$("#output").css('display','none');
return true;
}
function showResponse(response, statusText, xhr, $form) {
if(response.success == false)
{
var arr = response.errors;
$.each(arr, function(index, value)
{
if (value.length != 0)
{
$("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
}
});
$("#validation-errors").show();
} else {
$("#output").html("<img src='"+response.file+"' />");
$("#output").css('display','block');
}
}
Вот HTML-код для загрузки файла
<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
<input type="file" name="image" id="image" />
</form>
var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
url: 'url',
type: 'POST',
data: dataform,
async: false,
success: function(res) {
response data;
},
cache: false,
contentType: false,
processData: false
});
<input class="form-control cu-b-border" type="file" id="formFile">
<img id="myImg" src="#">
В js
<script>
var formData = new FormData();
formData.append('file', $('#formFile')[0].files[0]);
$.ajax({
type: "POST",
url: '/GetData/UploadImage',
data: formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data) {
console.log(data);
$('#myImg').attr('src', data);
},
error: function (xhr, ajaxOptions, thrownError) {
}
})
</script>
В контроллере
public ActionResult UploadImage(HttpPostedFileBase file)
{
string filePath = "";
if (file != null)
{
string path = "/uploads/Temp/";
if (!Directory.Exists(Server.MapPath("~" + path)))
{
Directory.CreateDirectory(Server.MapPath("~" + path));
}
filePath = FileUpload.SaveUploadedFile(file, path);
}
return Json(filePath, JsonRequestBehavior.AllowGet);
}
Вот идея, о которой я думал:
Have an iframe on page and have a referencer.
Иметь форму, в которой вы перемещаете элемент INPUT:File в.
Form: A processing page AND a target of the FRAME.
Результат будет опубликован во фрейме, а затем вы можете просто отправить извлеченные данные на нужный уровень тегу изображения, например:
data:image/png;base64,asdfasdfasdfasdfa
и страница загружается.
Я считаю, что это работает для меня, и в зависимости вы можете сделать что-то вроде:
.aftersubmit(function(){
stopPropigation()// or some other code which would prevent a refresh.
});
Это мой код, что он работает
var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++) {
if (files[i].value == "" || files[i].value == null) {
return false;
}
else {
formData.append(files[i].name, files[i].files[0]);
}
}
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++) {
formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
}
$.ajax({
type: 'POST',
data: formData,
contentType: false,
processData: false,
cache: false,
url: '/Controller/Action',
success: function (response) {
if (response.Success == true) {
return true;
}
else {
return false;
}
},
error: function () {
return false;
},
failure: function () {
return false;
}
});
Ajax не поддерживает загрузку файлов, вместо этого следует использовать iframe
<form class="form-horizontal" id="form-id" action="masterFileController" enctype="multipart/form-data"><button class="btn-success btn" type="submit" id="btn-save" >Submit</button></form>
сервлет отвечает как "out.print(" ваш ответ ");"
Решение 2023 года с использованием jQuery3 и .Net
HTML:
<form>
<input type=file /> <button class=upload>Upload</button>
</form>
ЯС:
$('button.upload').closest('form').on('submit', ev => {
ev.preventDefault();
const form = $(ev.target);
const files = form.find('input[type=file]')[0].files;
const formData = new FormData();
formData.append('upload', files[0]);
$.ajax({
url: '/manage/upload',
type: 'POST',
data: formData,
encType: 'multipart/form-data',
contentType: false,
processData: false
})
.done(r => {
debugger;
});
return false;
});
Контроллер Asp.Net MVC:
[HttpPost]
public async Task<JsonResult> Upload(HttpPostedFileBase upload)
{
string s = null;
using (upload.InputStream)
using (var reader = new StreamReader(stream, true))
s = await reader.ReadToEndAsync();
// Do something with the uploaded contents of the file
return Json(true);
}
Примечания об этом коде:
formData.upload('<name goes here>',...- в этом случае,'upload'- должно соответствовать имени параметра в вашем действии контроллера .Net (HttpPostedFileBase upload), Поэтому, если вы измените ключ в вызове AJAX с «загрузить» на'file'вам нужно изменить параметр Action, напримерHttpPostedFileBase fileесли хочешь, чтобы это было легко. Это можно сделать без сопоставления этих ключей тела формы, но это требует дополнительной работы.
В этом коде предполагается, что в вашей форме есть только один элемент управления загрузкой файла. Вы можете использовать больше входных данных для загрузки в форме, но это сложнее, но очень легко использовать этот код с 1 типом ввода = файл для каждой формы и несколькими такими парами форма/ввод. Форма, в которой вообще отсутствуют какие-либо атрибуты, является намеренной и совершенно нормальной, поскольку она никогда не предназначена для отправки куда-либо сама по себе.
The urlСвойство параметров, переданных в js для вызова ajax, должно быть путем к действию загрузки на вашем контроллере, где бы оно ни было. Здесь нет ничего особенного, просто простой веб-путь.
Действие контроллера здесь использует файл, исходя из того, что это текстовый документ, но вам не нужно этого делать. Я просто включаю то, как читать его в небольшом количестве строк кода, как то, что вам может быть удобно с ним делать.
Я исключил любую обработку ошибок, чтобы перейти к делу, и представил минимально возможный код, чтобы заставить это работать.
Функция стрелки в обработчике отправки не предлагает объект this, поэтому, если вы думаете об использовании$(this)илиthis.files... в этом обработчике вместо$(ev.target), не делай этого.