How to upload pictures to jCrop? - javascript

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.

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

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

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

Custom browse button to upload a fle

Hi I have currently custom 2 button called Browse and Import. I also have a input type as a text. My question is how i can browse and select a record and place in input type text
Please advise
<input type="button" id="btnBrowse" value="Browse" onclick="document.getElementById('fileID').click(); return false" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
<input type="submit" id="btnSubmit" value="Import" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
You can however customize nearly any other html element.
Here is a complete solution:
<input id="btn" type="file" style="display:none;" onchange="document.getElementById('file').value=this.value.substring(this.value.lastIndexOf('\\')+1);">
<input id="file" type="text" style="width:200px;">
<input type="button" onclick="document.getElementById('btn').click();" value="click me" />
Of course you can style a file input button. This has been covered over, and over, and over again on SO. For example, Labeling file upload button.
you can use
<input type="file"/>

Accessing the file from a form with a input file element

I want to access a file(e.g. image) using JavaScript with such a form:
<form id="form" enctype="multipart/form-data">
<input type="file" size="40" value="" id="upload" name="upload"/>
<input type="submit" id="submit" name="submit"/>
</form>
Is there a way to do it? I am trying to load a image specified by the client into a html5 cavas element without sending it back to the server.
http://www.matlus.com/html5-file-upload-with-progress/
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
hope this help.

Categories

Resources