Multiple file upload doesn't work (do I need javascript here?) - javascript

Here is my html form:
<form id="formulir" method="post" enctype="multipart/form-data" action="config-template-ecomerce.php">
title-file<input name="title" type="text" id="title"/><br>
color-one<input name="color-one" type="text" id="color-one"/><br>
<img id="uploadPreview" style="width: 100px;" /><br>
image<input type="file" name="image[]" id="image" onchange="PreviewImage();" multiple="true" /><br>
submit<input type="submit" name="button" id="button" value="Submit" />
</form>
From the html form above, I want to select multiple file with one browse botton.
After I select one file with the browse botton, then the file of image will be changed if I select another file of image. What I want is the file is added not changed.
Do I need a script for this? I have tried this in three browsers: chrome, opera and mozila.

According to our discussion in chat, you want to generate upload button dynamically. I can give you an example:
Suppose you have one upload button in html like this:
<body>
<form>
<input type="file" name="upload1" id="upload1"/>
</form>
</body>
Then, you can add another upload button on Click event on previous button using jquery:
$(function(){
$('#upload1').on('click',function(){
var r= $('<input type="file" value="new button"/>');
$("form").append(r);
});
});
JSFIDDLE DEMO HERE

Related

How can i upload preview images?

In my HTML form I have input filed with type file.
for example :
<input name="txt_file" type="file" id="txt_file" multiple>
I use code in this link here is the fiddle:
http://jsfiddle.net/L45LW/5/
How can i upload all image with javascript?
I want to store images info into array to send other page with POST in javascript.
Please help me
Not very clear what are you asking for! But at least you should have enctype="multipart/form-data" in your form tag to upload files.
<form id="form1" method="post" enctype="multipart/form-data">
<input name="txt_file" type="file" id="txt_file" multiple/>
<input type="submit" value="Upload" />
</form>

Firefox for Android input file onchange doesn't trigger when using camera

I am making a single picture form that should auto upload when the image is selected.
HTML
<form method="post" action="{{ bucket }}" enctype="multipart/form-data" id="pic-form">
<label>
<img src="placeholder.png" class="photo"/>
<input type="file" name="file" required id="pic-file" accept="image/"/>
</label>
<input type="submit" value="Upload" id="submit-btn"/>
</form>
JS:
$('#pic-file').on('change', function(evt){
$('#pic-form').submit();
});
It works fine on desktop, and on my phone it also triggers when I select a picture from my library but not when I select from camera.
I had a bug on the accept parameter. In my actual code I had "image/;capture=camera" where the HTML spec says it is a comma separated list. I had to change to "image/,capture=camera". At the end I ended up with this:
<input type="file" name="file"
required id="pic-file" accept=".jpg,.jpeg,.png,capture=camera"/>

Removing/Clearing all selected files via the File Input button

I'm using the input element in HTML with the file type option, IE: <input type="file" /> with the option of allowing multiple files to be selected.
However, I'm wondering if there's a way to remove or clear all of the files that the user selected via the file type button though a click of a button.
Basically, here is what I have so far:
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="" />
I have no idea how to implement that second button.
There is a trick: Redraw the HTML block! Source
<div id="container">
<input type="file" multiple="multiple" />
<input type="button" value="Clear all attachments" onclick="clearSelection();" />
</div>
//Javascript
function clearSelection() {
document.getElementById("container").innerHTML = document.getElementById("container").innerHTML;
}

click on input box to show open file dialog but not click on choose file button

I have an input box and I want user to click on the input box to show the open file dialog and show the filename in the same input box. But if I use the input type="file", it will show the "choose file button", I dont wan to show the button. How can I do it?
html:
<div class="fileupload">
<input type="file" class="file" name="image" />
</div>
<div class="fileupload">
<input type="file" class="file" name="attachement" />
</div>
http://jsfiddle.net/EctCK/
** I dont wan this, how do I hide the choose file button?
You can overlay a transparent <input type="file"/> over a styled button or other element.
<input type="file" style="opacity:0;"/>
See this JSFiddle for a working demo.
Well there is a little hack for this. You do need to have file upload control on the page. But you can hide it and simulate the file upload control using any other control like div/span/button and style it as you want. Here is a working sample on jsfiddle.
HTML:
<div id="dummy" class="dummyDiv">
<span>click to chose file:</span>
<span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
<input type="file" id="flupld" />
</div>
JS:
$("#dummy").click(function () {
$("#flupld").click();
});
$("#flupld").change(function () {
//file input control returns the file path as C:\fakepath\<file name>
//on windows, so we remeove it and show only file name.
var file=$(this).val().replace(/C:\\fakepath\\/ig,'');
$("#fileName").text(file);
});
try it:
<input type="file" id="upload" style="display:none">
Upload
Working sample on JSFiddle

How to upload pictures to jCrop?

I've used the codes I've found from here: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail, but there isn't an upload function. How do I add that?
Like if I use this function how can I implement jCrop?
<form enctype="multipart/form-data" action="save.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" /> </form>
You don't upload images to jCrop, you apply jCrop to your image element.
$(function(){ $('#id_of_your_image_element').Jcrop(); });
replace id_of_your_image_element with the id of your image tag, if you don't have an id on that tag, add one.

Categories

Resources