Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
->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="bb@gmail.com" 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