This jquery plugin allows you to turn any element into a file input element. http://plugins.jquery.com/project/custom-file
But to actually upload the file, the only documentation i could found is this:
To upload the chosen file to a server you should then attach the input element to a form element
how can i do that?
I think you need to create an html form and append the input to the form, and if you need to submit, you can do it via a submit button or via $.submit
# from http://www.daimi.au.dk/~u061768/file-input.html
<script type="text/javascript">
$(function() {
$('button').button().add('#foo, a').file().choose(function(e, input) {
$(input).appendTo('#TheForm').
attr('name', 'a-name').
attr('id', 'an-id');
});
});
</script>
...
<form method="post" enctype="multipart/form-data" id="TheForm" action="/path/in/your/server/">
<input type="submit" value="send">
</form>
Anyway this is not the best plugin for submiting the files via ajax.
The uploading itself is not of the scope of this plugin. You should see this with your server side technology.
Related
I am building a sort of page builder where the user can add blocks to the page and then save the layout. I have encountered a problem that I can't seem to figure out. I have a form that is dynamically added to the page with JavaScript containing a file input as so:
<form class="upload " action="" method="post">
<input id="" type="file" class="fill" name="upload">
<img src="/admin/img/default.png" alt="">
</form>
After adding the content I call the following function to add event listeners. $el corresponds to the file input.
function changeListen($el){
$el.addEventListener('change', function(){
$el.parentElement.submit();
});
$el.parentElement.addEventListener('submit', function(e){
e.preventDefault;
// call Ajax request...
});
}
I want to be able to update the database with an Ajax request when an image is selected, therefore I submit the form within the change event, so far so good, but for some reason the submit event is not taken into account and the page reloads. Any solutions or workaround appreciated, preferably not jQuery.
By using onsubmit event in HTML, you can call javascript function this way and do ajax calls.
Javascript sample
<script>
function doSomething() {
alert('Hello, World');
return false;
}
</script>
HTML Sample
<form onsubmit="return doSomething();">
<input type="submit" value="Submit" />
</form>
EDIT: return false in javascript so ? does not appear in URI after clicked
I am trying to submit this for without using a submit button. Here I have used javascript and once the form has submitted user should be directed to the B.php.
html code
<form id="jsform" action="B.php" method="POST" target="_blank">
<input type="hidden" value="test" name="title"/>
</form>
java-script code
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
These 2 code lines run separately but not running together. Any mistakes have I done.
In javascript you can do this:
window.onload=function() {
document.getElementById("jsform").submit(); // using ID
}
And with jQuery
$(function() {
$("#jsform").submit(); // using ID
});
I write my comment as an actual answer this time.
Drop target="_blank" and it should work just fine. Otherwise your browser might see it as a popup.
Also make sure your JS is run after your form.
Use form name to submit
document.myform.submit();
I want to modify the file submitted by user on the client side, before it reaches my server. To modify it I want to use Flash applet that would communicate with JavaScript.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="id_file">
<input type="submit" value="Submit">
</form>
Is it possible to do it? If yes, I would appreciate any tips how should it be done :)
Should I convert it to string? Or maybe JS comes with some functions to make such operations easier?
$( "form" ).change(function(x) {
//pass file input to Flash applet
x.preventDefault();
flashApplet.proceed($('#id_file').value);
});
function callback(modified_file) {
// Flash applet has modified the file
// Now submit the form with a new, modified file
$('#id_file').value = modified_file;
trigger_submit();
}
The file can be either a video, an audio or an image.
Don't use a submit button, instead use a normal button disguised to look like a submit button, and then you can check when the button is clicked, do your stuff, then submit the form via javascript by using
document.getElementById("myform").submit();
I would replace your current html with:
<form action="" method="post" enctype="multipart/form-data" id="myform">
<input type="file">
<button id="submit">Submit</button>
</form>
And then js:
document.getElementById('submit').onclick = function() {
//do your flash stuff
};
function callback(){
//here we submit the form
document.getElementById("myform").submit();
// because the file itself has been modified, this is all we need to do.
}
Basically, use a false submit button, to do what you want first.
I have html form where i can enter the data in the form of text . once the submit button iis pressed, should get option to save it as html page. and it should create static html page.
what is the best possible way to do this?
html form cade can be some thing like this.
<form method="post">
<textarea name="name" rows="2" cols="20"> </textarea >
<input type="submit" value="Submit" />
</form>
Check out this library! https://github.com/eligrey/FileSaver.js It allows you to generate files client-side (an html file in this case) and allow the client to download it, without interacting with a server
Here's a solution based loosely on this answer. When you click the button, it opens the entered html in the browser, which the user can save.
Sample HTML:
Get HTML page
Javascript:
var textInput = document.getElementById("textInput");
var getHtml = document.getElementById("getHtml");
getHtml.addEventListener("click", function () {
var htmlBlob = new Blob([textInput.value], {type: "text/html"});
window.location.href = window.URL.createObjectURL(htmlBlob);
});
Here's a jsfiddle version
In my web app,I need to upload a single file when a user selects that file and stay on the same html page.I am looking for a non-flash solution which probably uses jquery.and something which works on firefox.
By googling,I came across many plugins,most of them using elaborate html pages for showing input widgets / upload status indicators etc.I need something which I can use like this,using ajax.
mypage.html
<input type="file" id="myfileselect" > </input>
myjs.js
$(document).ready(function(){
$('#myfileselect').change(function(e){
//upload the file somehow
}
});
Is this possible?Can someone illustrate how I can do this?
I use this plugin in all my projects. Once the user selects the file, you simply call
$('#yourForm).ajaxSubmit()
and it will asynchronously upload your file.
http://jquery.malsup.com/form/
In your case, you would do it like this:
HTML
<form id="myForm">
<input type="file" id="myfileselect" > </input>
</form>
JQuery
$(document).ready(function(){
//set the options here
var options = {
url : 'yourScript.php',
method : 'post'
};
$('#myfileselect').change(function(e){
$('#myForm').ajaxSubmit(options);
}
});