Sorry if this question is a bit confusing but I don't know how else i can explain it so please bear with me.
Basically, I need to use 1 button for choose file and once the file's chosen, the file gets uploaded automatically as opposed to the standard file input + submit button if that makes sense?
So the usual standard file upload is like this:
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="submit" value="Upload">
</form>
is there any way so we can have something like this:
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
</form>
and once the file's chosen from that dialog box that opens after clicking on the choose file (file input), the file gets uploaded?
I've seen this done on many sites and I just wonder how they do it.
Any help would be appreciated.
The below code should help you fix it
$("document").ready(function() {
$("#uploadImage").change(function() {
$('#form').submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
</form>
Best way to do this with preview:
<input type='file' />
<img id="myImg" src="#" alt="your image" />
$("#myImg").hide();
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$("#myImg").show();
$('#myImg').attr('src', e.target.result);
};
Codepen: http://codepen.io/anon/pen/aNqPbb
You can use this library Dropzone.js
Click the link below
http://www.dropzonejs.com/
Add a javascript change event the file input. inside the change function do your file upload
Also set the css for the #uploadImage to hidden
ie. #uploadimage{display:"none"}
eg in jquery
$( "#fileinput" ).change(function() {
//do the fileupload here
});
Hope this helps.
If you are using Bootstrap, you can create beautiful single button file inputs by using the Bootstrap Filestyle plugin.
This is one of the many effects you can create:
$(document).ready(function(){
// <script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script> include this file..
(function($){var nextId=0;var Filestyle=function(element,options){this.options=options;this.$elementFilestyle=[];this.$element=$(element)};Filestyle.prototype={clear:function(){this.$element.val("");this.$elementFilestyle.find(":text").val("");this.$elementFilestyle.find(".badge").remove()},destroy:function(){this.$element.removeAttr("style").removeData("filestyle");this.$elementFilestyle.remove()},disabled:function(value){if(value===true){if(!this.options.disabled){this.$element.attr("disabled","true");this.$elementFilestyle.find("label").attr("disabled","true");this.options.disabled=true}}else{if(value===false){if(this.options.disabled){this.$element.removeAttr("disabled");this.$elementFilestyle.find("label").removeAttr("disabled");this.options.disabled=false}}else{return this.options.disabled}}},buttonBefore:function(value){if(value===true){if(!this.options.buttonBefore){this.options.buttonBefore=true;if(this.options.input){this.$elementFilestyle.remove();this.constructor();this.pushNameFiles()}}}else{if(value===false){if(this.options.buttonBefore){this.options.buttonBefore=false;if(this.options.input){this.$elementFilestyle.remove();this.constructor();this.pushNameFiles()}}}else{return this.options.buttonBefore}}},icon:function(value){if(value===true){if(!this.options.icon){this.options.icon=true;this.$elementFilestyle.find("label").prepend(this.htmlIcon())}}else{if(value===false){if(this.options.icon){this.options.icon=false;this.$elementFilestyle.find(".icon-span-filestyle").remove()}}else{return this.options.icon}}},input:function(value){if(value===true){if(!this.options.input){this.options.input=true;if(this.options.buttonBefore){this.$elementFilestyle.append(this.htmlInput())}else{this.$elementFilestyle.prepend(this.htmlInput())}this.$elementFilestyle.find(".badge").remove();this.pushNameFiles();this.$elementFilestyle.find(".group-span-filestyle").addClass("input-group-btn")}}else{if(value===false){if(this.options.input){this.options.input=false;this.$elementFilestyle.find(":text").remove();var files=this.pushNameFiles();if(files.length>0&&this.options.badge){this.$elementFilestyle.find("label").append(' <span class="badge">'+files.length+"</span>")}this.$elementFilestyle.find(".group-span-filestyle").removeClass("input-group-btn")}}else{return this.options.input}}},size:function(value){if(value!==undefined){var btn=this.$elementFilestyle.find("label"),input=this.$elementFilestyle.find("input");btn.removeClass("btn-lg btn-sm");input.removeClass("input-lg input-sm");if(value!="nr"){btn.addClass("btn-"+value);input.addClass("input-"+value)}}else{return this.options.size}},placeholder:function(value){if(value!==undefined){this.options.placeholder=value;this.$elementFilestyle.find("input").attr("placeholder",value)}else{return this.options.placeholder}},buttonText:function(value){if(value!==undefined){this.options.buttonText=value;this.$elementFilestyle.find("label .buttonText").html(this.options.buttonText)}else{return this.options.buttonText}},buttonName:function(value){if(value!==undefined){this.options.buttonName=value;this.$elementFilestyle.find("label").attr({"class":"btn "+this.options.buttonName})}else{return this.options.buttonName}},iconName:function(value){if(value!==undefined){this.$elementFilestyle.find(".icon-span-filestyle").attr({"class":"icon-span-filestyle "+this.options.iconName})}else{return this.options.iconName}},htmlIcon:function(){if(this.options.icon){return'<span class="icon-span-filestyle '+this.options.iconName+'"></span> '}else{return""}},htmlInput:function(){if(this.options.input){return'<input type="text" class="form-control '+(this.options.size=="nr"?"":"input-"+this.options.size)+'" placeholder="'+this.options.placeholder+'" disabled> '}else{return""}},pushNameFiles:function(){var content="",files=[];if(this.$element[0].files===undefined){files[0]={name:this.$element[0]&&this.$element[0].value}}else{files=this.$element[0].files}for(var i=0;i<files.length;i++){content+=files[i].name.split("\\").pop()+", "}if(content!==""){this.$elementFilestyle.find(":text").val(content.replace(/\, $/g,""))}else{this.$elementFilestyle.find(":text").val("")}return files},constructor:function(){var _self=this,html="",id=_self.$element.attr("id"),files=[],btn="",$label;if(id===""||!id){id="filestyle-"+nextId;_self.$element.attr({id:id});nextId++}btn='<span class="group-span-filestyle '+(_self.options.input?"input-group-btn":"")+'"><label for="'+id+'" class="btn '+_self.options.buttonName+" "+(_self.options.size=="nr"?"":"btn-"+_self.options.size)+'" '+(_self.options.disabled?'disabled="true"':"")+">"+_self.htmlIcon()+'<span class="buttonText">'+_self.options.buttonText+"</span></label></span>";html=_self.options.buttonBefore?btn+_self.htmlInput():_self.htmlInput()+btn;_self.$elementFilestyle=$('<div class="bootstrap-filestyle input-group">'+html+"</div>");_self.$elementFilestyle.find(".group-span-filestyle").attr("tabindex","0").keypress(function(e){if(e.keyCode===13||e.charCode===32){_self.$elementFilestyle.find("label").click();return false}});_self.$element.css({position:"absolute",clip:"rect(0px 0px 0px 0px)"}).attr("tabindex","-1").after(_self.$elementFilestyle);if(_self.options.disabled){_self.$element.attr("disabled","true")}_self.$element.change(function(){var files=_self.pushNameFiles();if(_self.options.input==false&&_self.options.badge){if(_self.$elementFilestyle.find(".badge").length==0){_self.$elementFilestyle.find("label").append(' <span class="badge">'+files.length+"</span>")}else{if(files.length==0){_self.$elementFilestyle.find(".badge").remove()}else{_self.$elementFilestyle.find(".badge").html(files.length)}}}else{_self.$elementFilestyle.find(".badge").remove()}});if(window.navigator.userAgent.search(/firefox/i)>-1){_self.$elementFilestyle.find("label").click(function(){_self.$element.click();return false})}}};var old=$.fn.filestyle;$.fn.filestyle=function(option,value){var get="",element=this.each(function(){if($(this).attr("type")==="file"){var $this=$(this),data=$this.data("filestyle"),options=$.extend({},$.fn.filestyle.defaults,option,typeof option==="object"&&option);if(!data){$this.data("filestyle",(data=new Filestyle(this,options)));data.constructor()}if(typeof option==="string"){get=data[option](value)}}});if(typeof get!==undefined){return get}else{return element}};$.fn.filestyle.defaults={buttonText:"Choose file",iconName:"glyphicon glyphicon-folder-open",buttonName:"btn-default",size:"nr",input:true,badge:true,icon:true,buttonBefore:false,disabled:false,placeholder:""};$.fn.filestyle.noConflict=function(){$.fn.filestyle=old;return this};$(function(){$(".filestyle").each(function(){var $this=$(this),options={input:$this.attr("data-input")==="false"?false:true,icon:$this.attr("data-icon")==="false"?false:true,buttonBefore:$this.attr("data-buttonBefore")==="true"?true:false,disabled:$this.attr("data-disabled")==="true"?true:false,size:$this.attr("data-size"),buttonText:$this.attr("data-buttonText"),buttonName:$this.attr("data-buttonName"),iconName:$this.attr("data-iconName"),badge:$this.attr("data-badge")==="false"?false:true,placeholder:$this.attr("data-placeholder")};$this.filestyle(options)})})})(window.jQuery);
$(":file").filestyle({input: false});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<input type="file" class="filestyle" data-input="false" data-buttonName="btn-info btn-xs" />
Related
I'm trying to upload a file in the header and after clicking submit, the uploaded file will be assigned to other file uploads but when I click the (X) button, all of the file upload associated will be removed as well. The sample image is uploaded here.
As much as possible, please limit the solution to JavaScript/jQuery only. Thanks.
Sample code below:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<p>Click on the "Choose File" button to upload a file:</p>
<input type="file" id="myFile" name="filename">
<br />
<br />
<input type="submit" onclick="test(event)">
<br />
<br />
<input type="button" value="X" onclick="removeFile('#myFile1')"><input type="file" id="myFile1" name="filename">
<input type="button" value="X" onclick="removeFile('#myFile2')"><input type="file" id="myFile2" name="filename">
<input type="button" value="X" onclick="removeFile('#myFile3')"><input type="file" id="myFile3" name="filename">
<script>
function test(e)
{
e.preventDefault();
$("#myFile1")[0].files = $("#myFile")[0].files;
$("#myFile2")[0].files = $("#myFile")[0].files;
$("#myFile3")[0].files = $("#myFile")[0].files;
}
function removeFile(value)
{
$(value).val('');
}
</script>
</body>
</html>
Do not be confused that when after removing a file, there is still file uploaded which is actually isn't.
your code correctly running! see this fiddle:
with no change:
function test(e)
{
e.preventDefault();
$("#myFile1")[0].files = $("#myFile")[0].files;
$("#myFile2")[0].files = $("#myFile")[0].files;
$("#myFile3")[0].files = $("#myFile")[0].files;
}
function removeFile(value)
{
$(value).val('');
}
https://jsfiddle.net/4mks8r59/
I have a PHP script to upload image on my form. It is functioning properly. I have 2 buttons, one to browse for the file (to be uploaded) and the other is a submit button that displays this image on the screen.
I want that on clicking Browse --> selecting file --> clicking OK, the file should get uploaded. Do not need the extra "submit" button.
I am just pasting a part of my code here, that represents these buttons.
<div class="upload_container">
<br clear="all" />
<div id='preview'></div>
<form id="image_upload_form" enctype="multipart/form-data" action="<?php
echo $_SERVER['PHP_SELF'];
?>" method="post" class="change-pic">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input style="padding-left:20px; color:#4d4d4d" type="file" id="file" name="user_image" accept="image/*" />
<script type="text/javascript">
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
</script>
</form>
</div>
</div>
You can use onchange function and then submit the form
<input style="padding-left:20px; color:#4d4d4d" type="file" id="file" name="user_image" accept="image/*" />
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
<html>
<head>
<title>File Upload Form</title>
</head>
<body>
This form allows you to upload a file to the server.<br />
<form action="getfile.php" method="post"><br />
Type (or select) Filename:
<input type="file" name="uploadFile" />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
I am working on a php language . I am uploading a pic from my computer . But there are two buttons ie choose file and Upload file . CHOOSE FILE is used to select the picture from PC and upload file button is used as SUBMIT button but i need a single button by clicking on it it will open my pc window to browse the photos and select it and it also act as a submit button . Is there any way to do this with single button
you need to change to things in your form tag:
1) Add a name tag: say name="frm"
2) enctype="multipart/form-data"
Then in your input file type add a function onchange="frm.submit();" // Where frm is name of the form
You can wait an event change on the input type="file" and send file after this event.
If you use jQuery, you can send the form with .submit().
Try with something like this
$("input[type='file']").on("change", function(){
$("form").submit();
});
.on("change", handler) : http://api.jquery.com/change/
.submit() : http://api.jquery.com/submit/
used jquery uplodify: uploadify
Demo
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
also check this for auto upload auto upload
Here's the code. Just use this as it is and it will work.
<html>
<head>
<title>File Upload Form</title>
</head>
<script>
$(document).ready(function(){
$("input[type='file']").on("change", function(){
$("#form1").submit();
});
});
</script>
<body>
This form allows you to upload a file to the server.<br />
<form action="getfile.php" method="post" enctype="multipart/form-data" id="form1"><br />
Type (or select) Filename:
<input type="file" name="uploadFile" />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
This is what I've done in my project:
HTML:
<input type="button" id="btnUpload" value="Upload File" />
<form action="getfile.php" method="post" id="upload_form" style="display: none;">
Type (or select) Filename:
<input type="file" name="uploadFile" />
</form>
Javascript
$(function(){
$('#btnUpload').click(function(){
//Show select file dialog
$('#uploadFile').click();
//Wait for user to select a file
var tmr = setInterval(function(){
if($('#uploadFile').val() !== "") {
clearInterval(tmr);
$('#upload_form').submit();
}
}, 500);
});
});
I'm pretty new to jQuery and I'm trying to make simple HTML upload page and I want to add new file input to form after selecting some file. I've tried this code
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form></body>
<script>
$('#upload').delegate('input[type=file]', 'change', function(){
alert('Alert');
addField();
});
</script>
and this addField() function
function addField(){
$('<input type="file" name="files[]" id="file" /><br />').insertAfter('#file');
};
But if I run this code, the 3rd input field is inserted after the 1st one instead of after the last field. Is it possible to add input fields after the last file input without using unique ids for these inputs? http://jsfiddle.net/aHrTd/
Thanks for any help.
How about this - (find last input:file in form and insert new input after it)
function addField(){
$('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}
Here is a solution: http://jsfiddle.net/aHrTd/4/
Adds a unique name and id to the new file inputs and inserts after last file input as pXL has suggested.
Note that I have used one of the most under-utilized jQuery abilities, though it easy to find (http://api.jquery.com/jQuery/) can build a new element for you in a nice clean way.
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>
<script>
function addField(){
var lastfile = $('form input:file').last();
var countfile = ($('form input:file').length)+1;
$( "<input/>", {
"type": "file",
"name": "file_"+countfile,
"id": "file_"+countfile
}).insertAfter(lastfile);
fileinputmonitor();
}
function fileinputmonitor(){
$('input[type="file"]').change(function(){
alert('Alert');
addField();
});
}
fileinputmonitor();
</script>
Your inputs have to have unique ids. Give them a unique id and it should work fine.
You can use .last()
HTML
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" class='dynamic-file' /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
JS
function addField(){
$('<input type="file" name="files[]" class="dynamic-file" /><br />').insertAfter($('.dynamic-file').last());
};
I have a simple file upload form. How do I make it submit automatically when a file has been selected? I don't want the user to have to click the Submit button.
You can simply call your form's submit method in the onchange event of your file input.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
http://jsfiddle.net/cwvc4/73/
Just tell the file-input to automatically submit the form on any change:
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>
This solution works like this:
onchange makes the input element execute the following script, whenever the value is modified
form references the form, that this input element is part of
submit() causes the form to send all data to the URL, as specified in action
Advantages of this solution:
Works without ids. It makes life easier, if you have several forms in one html page.
Native javascript, no jQuery or similar required.
The code is inside the html-tags. If you inspect the html, you will see it's behavior right away.
Using jQuery:
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>
JavaScript with onchange event:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
jQuery
.change() and .submit():
$('#fileInput').change(function() {
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>
The shortest solution is
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>
This is my image upload solution, when user selected the file.
HTML part:
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
JavaScript:
document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
var upload = document.getElementById('img_input');
var image = upload.files[0];
$.ajax({
url:"/foo/bar/uploadPic",
type: "POST",
data: new FormData($('#img_form')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
};
If you already using jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>
Try bellow code with jquery :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#myForm').on('change', "input#MyFile", function (e) {
e.preventDefault();
$("#myForm").submit();
});
});
</script>
<body>
<div id="content">
<form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
<input type="file" id="MyFile" value="Upload" />
</form>
</div>
</body>
</html>
For those who are using .NET WebForms a full page submit may not be desired. Instead, use the same onchange idea to have javascript click a hidden button (e.g. <asp:Button...) and the hidden button can take of the rest. Make sure you are doing a display: none; on the button and not Visible="false".
HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>
You can put this code to make your code work with just single line of code
<input type="file" onchange="javascript:this.form.submit()">
This will upload the file on server without clicking on submit button
<form action="http://example.com">
<input type="file" onchange="Submit()" />
</form>
<script>
// it will submit form 0 or you have to select particular form
document.getElementsByTagName("form")[0].submit();
</script>
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>