-
-
Save weisk/0d42c5d580c23a2c08e22c45aa7fe611 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
->Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string. | |
And Setting the contentType to false is imperative. | |
Refference link: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects | |
//01// File Upload using FormData Object in Javascript | |
Syntax: | |
var formData = new FormData(); // Currently empty | |
formData.append(name, value); // custom text field where key/value pair | |
formData.append(name, value, filename); // Custom file uploading | |
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg'); // Custom multiple file uploading with the same name | |
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg'); | |
i.e 01: | |
<form action="" enctype="multipart/form-data"> | |
<input type="file" name="myfile[]" multiple /> | |
<input type="submit" /> | |
</form> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> | |
<script> | |
var request = new XMLHttpRequest(); | |
request.upload.addEventListener("load",function(e){ | |
console.log("Uploaded successfull"); | |
}, false); | |
var form = document.querySelector("form"); | |
form.addEventListener("submit",function(e){ | |
e.preventDefault(); | |
var formData = new FormData(form); | |
request.open("POST", "main.php"); | |
request.send(formData); | |
}, false); | |
</script> | |
//PHP | |
<?php | |
//print_r($_FILES); | |
foreach($_FILES["myfile"]["name"] as $index=>$image_name){ | |
if(move_uploaded_file($_FILES["myfile"]["tmp_name"][$index], "images/".$image_name)){ | |
$upload[] = $image_name; | |
} | |
} | |
echo json_encode($upload); | |
?> | |
i.e 02: =>Form Objects selecting: | |
<form enctype="multipart/form-data" method="post" name="fileinfo"> | |
<label>Your email address:</label> | |
<input type="email" autocomplete="on" value="[email protected]" id="jj" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> | |
<label>Custom file label:</label> | |
<input type="text" name="filelabel" size="12" maxlength="32" /><br /> | |
<label>File to stash:</label> | |
<input type="submit" value="Stash the file!" /> | |
</form> | |
<script> | |
//var formData = document.forms.namedItem("fileinfo"); | |
//var formData = document.forms[0].length; // 4 elements | |
//var formData = document.forms[0].elements[1].name; // select 2nd elements name | |
//var formData = document.fileinfo.userid.type; // select using name attribute or only obj not arrray | |
//var formData = document.fileinfo.userid.value; // select value of the element | |
alert(formData); | |
</script> | |
//03//Excel File Upload | |
<div class="choice-excel-file-action" style='position: absolute; left: 40px; bottom: 90px; width: 190px; height: 59px;'> | |
<button style='background: white; border: 1px solid #292828; font-size: 20px; padding: 2px 15px; border-radius: 5px; color: #292828; position: absolute; text-align: center; width: 100%; height: 100%;' onClick="$('#input_excel_file_buyer_quotation').click()">ファイルを<br>選択</button> | |
<input id="input_excel_file_buyer_quotation" type="file" style='position: absolute; height: 100%; width: 100%; opacity: 0;' required="" onChange="readFiles(this)"> | |
</div> | |
function readFiles(input){ | |
var formData = new FormData(); | |
//var files = $(input)[0].files; | |
//formData.append("quotation", files[0]); | |
formData.append("quotation", document.getElementById("input_excel_file_buyer_quotation").files[0]); | |
} | |
//01// File Upload Using Ajax | |
var fd = new FormData(); | |
fd.append( 'file', input.files[0] ); | |
$.ajax({ | |
url: 'http://example.com/script.php', | |
data: fd, | |
processData: false, | |
contentType: false, | |
type: 'POST', | |
success: function(data){ | |
alert(data); | |
} | |
}); | |
//02// | |
div id="data"></div> | |
<form> | |
<input type="file" name="userfile" id="userfile" size="20" /> | |
<br /><br /> | |
<input type="button" id="upload" value="upload" /> | |
</form> | |
<script> | |
$(document).ready(function(){ | |
$('#upload').click(function(){ | |
console.log('upload button clicked!') | |
var fd = new FormData(); | |
fd.append( 'userfile', $('#userfile')[0].files[0]); | |
$.ajax({ | |
url: 'main.php', | |
data: fd, | |
processData: false, | |
contentType: false, | |
type: 'POST', | |
success: function(data){ | |
console.log('upload success!') | |
$('#data').empty(); | |
$('#data').append(data); | |
} | |
}); | |
}); | |
}); | |
</script> | |
//03// | |
<form id="upload_form" enctype="multipart/form-data"> | |
jQuery with CodeIgniter file upload: | |
var formData = new FormData($('#upload_form')[0]); | |
formData.append('tax_file', $('input[type=file]')[0].files[0]); | |
$.ajax({ | |
type: "POST", | |
url: base_url + "member/upload/", | |
data: formData, | |
//use contentType, processData for sure. | |
contentType: false, | |
processData: false, | |
beforeSend: function() { | |
$('.modal .ajax_data').prepend('<img src="' + | |
base_url + | |
'"asset/images/ajax-loader.gif" />'); | |
//$(".modal .ajax_data").html("<pre>Hold on...</pre>"); | |
$(".modal").modal("show"); | |
}, | |
success: function(msg) { | |
$(".modal .ajax_data").html("<pre>" + msg + | |
"</pre>"); | |
$('#close').hide(); | |
}, | |
error: function() { | |
$(".modal .ajax_data").html( | |
"<pre>Sorry! Couldn't process your request.</pre>" | |
); // | |
$('#done').hide(); | |
} | |
}); | |
you can use. | |
var form = $('form')[0]; | |
var formData = new FormData(form); | |
formData.append('tax_file', $('input[type=file]')[0].files[0]); | |
or | |
var formData = new FormData($('#upload_form')[0]); | |
formData.append('tax_file', $('input[type=file]')[0].files[0]); | |
///////Dummy/////////// | |
$("#uploadedfile")[0].files[0] and $(this)[0].files[0] or this.files[0]; | |
//Another | |
The files selected are stored in an array: [input].files | |
For example, you can access the items | |
// assuming there is a file input with the ID `my-input`... | |
var files = document.getElementById("my-input").files; | |
for (var i = 0; i < files.length; i++) | |
{ | |
alert(files[i].name); | |
} | |
For jQuery-comfortable people, it's similarly easy | |
// assuming there is a file input with the ID `my-input`... | |
var files = $("#my-input")[0].files; | |
for (var i = 0; i < files.length; i++) | |
{ | |
alert(files[i].name); | |
} | |
//Another | |
function readURL(input) { | |
if (input.files && input.files[0]) { | |
var reader = new FileReader(); | |
reader.onload = function (e) { | |
$('#blah').attr('src', e.target.result); | |
} | |
reader.readAsDataURL(input.files[0]); | |
} | |
} | |
$("#imgInp").change(function(){ | |
readURL(this); | |
}); | |
and the associated HTML: | |
<form id="form1" runat="server"> | |
<input type='file' id="imgInp" /> | |
<img id="blah" src="#" alt="your image" /> | |
</form> | |
//another | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment