How to remove a file without affecting other file upload in HTML - javascript

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/

Related

How do I pass multiple images uploaded through a JS function and then submitted with the form?

I'm trying to have multiple images uploaded by a user passed through a function and then processed with the submit of the form. I have the following form which takes in the users upload files:
<form id="formUploadFile" action="<?php echo $uploadHandler ?>"
enctype="multipart/form-data" method="post" >
<p>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>">
</p>
<p align="center">
<label for="file" >First, Choose up to 20 images!</label>
<input type="file" name="files[]" multiple />
</p>
</p>
<p class="text-center">
<h5>Then, Choose your Difficulty!</h5>
<div class="btn-group">n>
<button type="button" class="btn btn-success" value="Novice" onclick="changeDifficulty(1)">Novice</button>
<button type="button" class="btn btn-success" value="Intermediate" onclick="changeDifficulty(2)">Intermediate</button>
</div>
</p>
</form>
And then I have the following function which takes in the difficulty choice, displays a loading circle and then should submit the form with the multiple images:
<script>
function changeDifficulty(number){
var difficulty = document.getElementById('hiddDiff');
var form = getElementById('formUploadFile');
difficulty.value = number;
document.getElementById('hide-div').style.display='none';
document.getElementById('hide-div2').style.display='none';
document.getElementById('loadingScreen').style.display='block';
form.submit();
}
However, the image files are not being submitted with the form... if I take away the "multiple" statement in the line, then this code will pass one image successfully. Any help is appreciated.
I'm not sure where your issue is, but I've tested this myself and it's working perfectly fine with multiple files:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
var time = 0;
var form;
// Make sure the DOM is loaded
document.addEventListener("DOMContentLoaded", function(event) {
// Add event listener to the form submit
document.getElementById("formUploadFile").addEventListener("submit", function(e) {
// Display the loading image
document.getElementById('loadImg').style.display='block';
// Prevent the form submit unless time is equal to 3
form = function(){
// Time is equal to 3, so submit the form
if(time === 3){
document.getElementById("formUploadFile").submit();
} else {
// Repeat the form function every second and increase time by 1 on each loop
setTimeout(form, 1000);
time++;
e.preventDefault();
}
}
form();
});
});
</script>
</head>
<body>
<img id="loadImg" src="load.gif" style="display:none;">
<form id="formUploadFile" name="upload" action="upload.php" method="POST" enctype="multipart/form-data">
Select images to upload: <input type="file" name="image[]" multiple>
<input type="submit" name="upload" value="upload">
</form>
</body>
</html>
I've put comments inside the code that explain what's happening.

PHP Image Upload with one button

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();
};

Jquery: 1 button for choose file and file upload?

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" />

input file: write the name of the file in a text input with Javascript

I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>
Here is a fully working example
JavaScript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML:
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example
Hope you find it helpful, Asaf
For the newcomers:
document.getElementById("thefile").onchange = function() {
document.getElementById("some_text").value = this.files[0].name;
};
/* BELOW FULLPATH VERSION (depending on browser)
document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br>
<br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
Just take the file input' value, split it and take the last index:
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name
(Sorry that cant format my answer. I answered by a smartphone)

uploading a pic from computer with single button in php

<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);
});
});

Categories