반응형
jQuery Ajax 파일 업로드
다음 jQuery 코드를 사용하여 ajax 요청의 POST 메서드를 사용하여 파일 업로드를 수행 할 수 있습니까?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
가능하다면 data부품 을 채워야 합니까? 올바른 방법입니까? 서버 측에만 파일을 게시합니다.
나는 인터넷 검색을 해왔지만 내가 찾은 것은 내 계획에서 나는 그것을 사용하고 싶지 않은 동안 플러그인이었다. 적어도 지금은.
ajax를 통해 파일 업로드가
불가능
합니다. IFrame을 사용하면 페이지를 새로 고침하지 않고 파일을 업로드 할 수 있습니다. 여기에서 자세한 내용을 확인할 수 있습니다.
최신 정보:
XHR2에서는 AJAX를 통한 파일 업로드가 지원됩니다. 예를 들어 FormData 객체 를 통해 그러나 불행히도 모든 / 이전 브라우저에서 지원되지 않습니다.
FormData 지원은 다음 데스크톱 브라우저 버전에서 시작됩니다. IE 10 이상, Firefox 4.0 이상, Chrome 7 이상, Safari 5 이상, Opera 12 이상
자세한 내용은 MDN 링크를 참조하십시오.
ajax를 통해 파일을 업로드하는 데 더 이상 Iframe이 필요하지 않습니다. 최근에 혼자서 해봤어요. 다음 페이지를 확인하십시오.
AJAX 및 jQuery와 함께 HTML5 파일 업로드 사용
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
답변을 업데이트하고 정리했습니다. 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 + "%");
};
업로드 클래스 사용 방법
//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();
});
Progressbar HTML 코드
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
Progressbar 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);
}
});
보시다시피 비어 있거나 (직렬화 됨?- $('#yourForm').serialize())기존 양식 에서) FormData 객체를 만든 다음 입력 파일을 첨부해야합니다.
여기에 대한 자세한 내용은 다음과 같습니다 - 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";
}
?>
XMLHttpRequest ()를 사용하면 AJAX 업로드가 실제로 가능합니다. iframe이 필요하지 않습니다. 업로드 진행 상황을 볼 수 있습니다.
자세한 내용은 https://stackoverflow.com/a/4943774/873282 에 답변하여 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
}
다음과 같이하고 싶은 경우 :
$.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
당신의 해결책이 될 수 있습니다.
- 숨겨진 iframe을 사용하고 양식의 대상을 해당 iframe의 이름으로 설정합니다. 이렇게하면 양식이 제출 될 때 iframe 만 새로 고쳐집니다.
- 응답을 파싱하려면 iframe의로드 이벤트에 대해 이벤트 핸들러를 등록해야합니다.
내 블로그 게시물에 대한 자세한 내용 : http://blog.manki.in/2011/08/ajax-fie-upload.html .
$("#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;
});
편집 : 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']
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/
자바 스크립트 :
$(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;
}
나는 이것을 간단한 코드로 처리했다. 여기 에서 작동하는 데모를 다운로드 할 수 있습니다.
귀하의 경우, 이것은 매우 가능합니다. 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");
}
});
});
});
끝났습니다. 더보기
예, javascript를 사용하여 파일을 가져 와서 파일을 데이터 URL로 읽으십시오. 실제로 base64로 인코딩 된 데이터를 얻기 위해 base64 이전의 내용을 구문 분석 한 다음 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"]));
물론 다루고있는 파일 유형과 그와 같은 것들을 확인하는 것과 같은 일부 유효성 검사를 원할 것입니다. 그러나 이것이 아이디어입니다.
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");
}
});
});
<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>
다음과 같이 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;
});
});
jquery를 사용하여 사용자가 양식의 일부로 제출 한 파일을 업로드하려면 아래 코드를 따르십시오.
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
그런 다음 양식 데이터 개체를 서버로 보냅니다.
또한 File 또는 Blob을 FormData 개체에 직접 추가 할 수도 있습니다.
data.append("myfile", myBlob, "filename.txt");
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>
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");
});
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
});
순수한 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>내가 생각한 아이디어는 다음과 같습니다.
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.
});
참고 URL : https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
반응형
'Programing' 카테고리의 다른 글
| Bootstrap 3에서 SR 전용이란 무엇입니까? (0) | 2020.09.30 |
|---|---|
| Java 8 스트림을 배열로 변환하는 방법은 무엇입니까? (0) | 2020.09.30 |
| virtualenv에서 Python 3 사용 (0) | 2020.09.30 |
| Javadoc의 외부 URL에 연결 하시겠습니까? (0) | 2020.09.30 |
| 사용자가 Enter 키를 눌러 양식을 제출하지 못하도록 방지 (0) | 2020.09.30 |