I'm looking for a plugin which allows adding multiple images, previewing, removing and submitting with some extra fields without ajax.
i have found some very good plugins like fineUploader and dropzone but they submit with ajax. with these plugins i haven't figured out how to submit without ajax.
I'm looking for a plugin which allows adding multiple images, previewing, removing and submitting with some extra fields without
ajax.
multiple images ----> <input type='file' id="myfiles" multiple="multiple" name="files[]">
previewing ---> Jquery
removing-----> Highly impossible to remove one by one image from file list,as the api is read only,however we can clear the entire file list, when the remove button is clicked.
without ajax ----> Just action the form to the controller/handler.
I don't think there's a way to achieve what you need beside using one of the plugins you have mentioned above.
You have 2 Options that I can think of currently.
use the multiple attribute on the file input type, then u can be able to use jquery to preview the images that are loaded but however we can not remove the image one by one from the filelist we can only remove the image from the preview but the server side still gonna process the image, or we can just clear the entire filelist, as I have mentioned above.
OR
we can add the file field dynamically using jquery, in this way we can be able to add one image add a time, then have an add more images button that will append a new file input to our form, with this we will be able to remove images one by one before processing in the server side.
Option 1
$('document').ready(function() {
var images = function(input, imgPreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML("<img class='pic'>")).attr('src', event.target.result).appendTo(imgPreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#myimg').on('change', function() {
images(this, '#previews');
});
//clear the file list when image is clicked
$('body').on('click','img',function(){
$('#myimg').val("");
$('#previews').html("");
});
});
img{
cursor: pointer;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<form id="form1" enctype="multipart/form-data" action="server.php" method="post">
<input type='file' id="myimg" multiple="multiple">
<div id="previews"></div>
<p> </p>
<button type="submit">Submit</button>
</form>
Option 2
var abc = 0;
$('#add_more').click(function ()
{
$(this).before($("<div/>",{id: 'filediv'}).fadeIn('slow').append($("<input/>",
{
name: 'file[]',
type: 'file',
id: 'file'
}),
$("<br/><br/>")
));
});
$('body').on('change', '#file', function ()
{
if (this.files && this.files[0])
{
abc += 1; //increementing global variable by 1
var z = abc - 1;
var x = $(this)
.parent()
.find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this)
.hide();
$("#abcd" + abc).append($("<img/>",{
id: 'img',
src: 'x.png', //the remove icon
alt: 'delete'
}) .click(function ()
{
$(this)
.parent()
.parent()
.remove();
}));
}
});
//image preview
function imageIsLoaded(e)
{
$('#previewimg' + abc)
.attr('src', e.target.result);
};
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<form method="POST" action="server.php" enctype="multipart/form-data">
<div class="col-md-3 col-sm-3 col-xs-3">
<div id="filediv"><input name="file[]" type="file" id="file"/></div>
<input type="button" id="add_more" class="btn btn-primary" value="Add More Files"/><br><br>
<button type="submit" class="btn btn-success">Submit</button>
</form>
I believe this more esp option 2 can do the trick, select image, add more preview delete, then when u are happy hit the submit button then do your processing on the server. You might add styling to the preview images
Goodluck.
You can use DropzoneJS
They have a list of configurable options that you can find here. Dropzone JS Usage.
If you still need more customization then you will have to add your own code to it. Hope this helps you from writing thousand lines of code.
Without AJAX requests:
This may help you. Click here!
Hello, I am trying to implement some code I got at http://elfga.com/. I want to integrate it with the file upload scripts from AspUpload. I have it working separately but not together.
If I wrap the jquery in
$(document).ready(function(){
...
});
the jquery runs, polls the script that reports the upload status, and writes to the console as expected. If I bind it to the form submission by using
$(document).ready(function(){
$("#addForm").submit(function() {
...
});
});
the file uploads, but the jquery does not poll the script and write the data to the console.
I'm fairly new to jquery. What have I got wrong here? Thanks
html
<form name="addForm" id="addForm" method="post" enctype="multipart/form-data" action="moduleMaterialUpd.asp?PID=368337C0351A5DE6" onSubmit="getProgress()">
<fieldset>
<div>
<label for="title">Material: </label>
<input name="filename" type="file" required/>
</div>
<div>
<input class="button big primary" name="button" type="submit" value="Add Material"/>
<a class="button big primary" href="module.asp?id=456283123">Done</a>
</div>
</fieldset>
</form>
<div class="progress progress-striped active" id="progressouter" style="width:500px; margin:10px auto;">
<div class="bar" id="progress"></div>
</div>
jquery
<script type="text/javascript">
$(document).ready(function(){
//$("#addForm").submit(function() {
var request;
var thispid = "<%=mypid%>";
console.log(thispid);
var progresspump = setInterval(function(){
/* query the completion percentage from the server */
request = $.ajax({
type: "GET",
url: "progress_ajax_update.asp?pid=<%=mypid%>",
dataType: "xml"
});
// callback handler that will be called on success
request.done(function (xml){
$(xml).find('Progress').each(function(){
var elap = $(this).find('ElapsedTime').text();
var rem = $(this).find('RemainingTime').text();
var perc = $(this).find('PercentComplete').text();
var tot = $(this).find('TotalBytes').text();
var upl = $(this).find('UploadedBytes').text();
var rem = $(this).find('RemainingBytes').text();
var spd = $(this).find('TransferSpeed').text();
// log a message to the console
console.log(elap);
console.log(perc);
console.log("progress_ajax_update.asp?pid=<%=mypid%>")
/* update the progress bar width */
$("#progress").css('width',perc+'%');
/* and display the numeric value */
$("#progress").html(perc+'%');
/* test to see if the job has completed */
if(test > 99.999) {
clearInterval(progresspump);
$("#progressouter").removeClass("active");
$("#progressouter").removeClass("progress-striped");
$("#progress").html("Done");
}
});
});
}, 2000);
//});
});
</script>
You get this behavior, because when you submit form (by clicking submit button) you actually reload the page or even direct the form submission to another script which in both cases stops javascript interpretation. So to achieve what you want you need to prevent the submission of form before the point you need. Just try to use in your .submit(event):
return false;
or for latest Chromes I guess (maybe even combine both)
event.returnValue=false;
You can then check the progress of upload and do something with javascript or when you are happy with upload, then only submit your form in javascript:
$('#form-id').submit()
But in latter case don't forget to use .on('click') handler first on submit button to do what you need, because $(form).submit() will simply call again your submit() function and which don't return true and continue the event.
I currently have a HTML form which users fill in details of an advert they wish to post. I now want to be able to add a dropzone for uploading images of the item for sale.
I have found Dropzone.js which seems to do most of what I need. However, when looking into the documentation, it appears that you need to specify the class of the whole form as dropzone (as opposed to just the input element). This then means that my entire form becomes the dropzone.
Is it possible to use the dropzone in just part of my form, i.e. by only specifying the element as class "dropzone", rather than the whole form?
I could use separate forms, but I want the user to be able to submit it all with one button.
Alternatively, is there another library that can do this?
Many thanks
Here's another way to do it: add a div in your form with a classname dropzone, and implement dropzone programmatically.
HTML :
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
JQuery:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
Note : Disabling autoDiscover, otherwise Dropzone will try to attach twice
I had the exact same problem and found that Varan Sinayee's answer was the only one that actually solved the original question. That answer can be simplified though, so here's a simpler version.
The steps are:
Create a normal form (don't forget the method and enctype args since this is not handled by dropzone anymore).
Put a div inside with the class="dropzone" (that's how Dropzone attaches to it) and id="yourDropzoneName" (used to change the options).
Set Dropzone's options, to set the url where the form and files will be posted, deactivate autoProcessQueue (so it only happens when user presses 'submit') and allow multiple uploads (if you need it).
Set the init function to use Dropzone instead of the default behavior when the submit button is clicked.
Still in the init function, use the "sendingmultiple" event handler to send the form data along wih the files.
Voilà ! You can now retrieve the data like you would with a normal form, in $_POST and $_FILES (in the example this would happen in upload.php)
HTML
<form action="upload.php" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone" id="myDropzone"></div>
<button type="submit" id="submit-all"> upload </button>
</form>
JS
Dropzone.options.myDropzone= {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("firstname", jQuery("#firstname").val());
formData.append("lastname", jQuery("#lastname").val());
});
}
}
The "dropzone.js" is the most common library for uploading images.
If you want to have the "dropzone.js" as just part of your form, you should do the following steps:
1) for the client side:
HTML :
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<div>
<button type="submit" id="submit-all"> upload </button>
</div>
JQuery:
<script>
Dropzone.options.myDropzone = {
url: "/Account/Create",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submit-all");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("Username", $("#Username").val());
});
}
};
</script>
2) for the server side:
ASP.Net MVC
[HttpPost]
public ActionResult Create()
{
var postedUsername = Request.Form["Username"].ToString();
foreach (var imageFile in Request.Files)
{
}
return Json(new { status = true, Message = "Account created." });
}
I have a more automated solution for this.
HTML:
<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
{{ csrf_field() }}
<!-- You can add extra form fields here -->
<input hidden id="file" name="file"/>
<!-- You can add extra form fields here -->
<div class="dropzone dropzone-file-area" id="fileUpload">
<div class="dz-default dz-message">
<h3 class="sbold">Drop files here to upload</h3>
<span>You can also click to open file browser</span>
</div>
</div>
<!-- You can add extra form fields here -->
<button type="submit">Submit</button>
</form>
JavaScript:
Dropzone.options.fileUpload = {
url: 'blackHole.php',
addRemoveLinks: true,
accept: function(file) {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function() {
let content = fileReader.result;
$('#file').val(content);
file.previewElement.classList.add("dz-success");
}
file.previewElement.classList.add("dz-complete");
}
}
Laravel:
// Get file content
$file = base64_decode(request('file'));
No need to disable DropZone Discovery and the normal form submit will be able to send the file with any other form fields through standard form serialization.
This mechanism stores the file contents as base64 string in the hidden input field when it gets processed. You can decode it back to binary string in PHP through the standard base64_decode() method.
I don't know whether this method will get compromised with large files but it works with ~40MB files.
Enyo's tutorial is excellent.
I found that the sample script in the tutorial worked well for a button embedded in the dropzone (i.e., the form element). If you wish to have the button outside the form element, I was able to accomplish it using a click event:
First, the HTML:
<form id="my-awesome-dropzone" action="/upload" class="dropzone">
<div class="dropzone-previews"></div>
<div class="fallback"> <!-- this is the fallback if JS isn't working -->
<input name="file" type="file" multiple />
</div>
</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>
Then, the script tag....
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// Here's the change from enyo's tutorial...
$("#submit-all").click(function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
}
Further to what sqram was saying, Dropzone has an additional undocumented option, "hiddenInputContainer". All you have to do is set this option to the selector of the form you want the hidden file field to be appended to. And voila! The ".dz-hidden-input" file field that Dropzone normally adds to the body magically moves into your form. No altering the Dropzone source code.
Now while this works to move the Dropzone file field into your form, the field has no name. So you will need to add:
_this.hiddenFileInput.setAttribute("name", "field_name[]");
to dropzone.js after this line:
_this.hiddenFileInput = document.createElement("input");
around line 547.
I want to contribute an answer here as I too have faced the same issue - we want the $_FILES element available as part of the same post as another form. My answer is based on #mrtnmgs however notes the comments added to that question.
Firstly: Dropzone posts its data via ajax
Just because you use the formData.append option still means that you must tackle the UX actions - i.e. this all happens behind the scenes and isn't a typical form post. Data is posted to your url parameter.
Secondly: If you therefore want to mimic a form post you will need to store the posted data
This requires server side code to store your $_POST or $_FILES in a session which is available to the user on another page load as the user will not go to the page where the posted data is received.
Thirdly: You need to redirect the user to the page where this data is actioned
Now you have posted your data, stored it in a session, you need to display/action it for the user in an additional page. You need to send the user to that page as well.
So for my example:
[Dropzone code: Uses Jquery]
$('#dropArea').dropzone({
url: base_url+'admin/saveProject',
maxFiles: 1,
uploadMultiple: false,
autoProcessQueue:false,
addRemoveLinks: true,
init: function(){
dzClosure = this;
$('#projectActionBtn').on('click',function(e) {
dzClosure.processQueue(); /* My button isn't a submit */
});
// My project only has 1 file hence not sendingmultiple
dzClosure.on('sending', function(data, xhr, formData) {
$('#add_user input[type="text"],#add_user textarea').each(function(){
formData.append($(this).attr('name'),$(this).val());
})
});
dzClosure.on('complete',function(){
window.location.href = base_url+'admin/saveProject';
})
},
});
You can modify the formData by catching the 'sending' event from your dropzone.
dropZone.on('sending', function(data, xhr, formData){
formData.append('fieldname', 'value');
});
In order to submit all files alongside with other form data in a single request you can copy Dropzone.js temporary hidden input nodes into your form. You can do this within addedfiles event handler:
var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
// Input node with selected files. It will be removed from document shortly in order to
// give user ability to choose another set of files.
var usedInput = myDropzone.hiddenFileInput;
// Append it to form after stack become empty, because if you append it earlier
// it will be removed from its parent node by Dropzone.js.
setTimeout(() => {
// myForm - is form node that you want to submit.
myForm.appendChild(usedInput);
// Set some unique name in order to submit data.
usedInput.name = "foo";
}, 0);
});
Obviosly this is a workaround dependent on implementation details. Related source code.
Working solution for 5.7.0 version
<form id="upload" enctype="multipart/form-data">
<input type="text" name="name" value="somename">
<input type="checkbox" name="terms_agreed">
<div id="previewsContainer" class="dropzone">
<div class="dz-default dz-message">
<button class="dz-button" type="button">
Drop files here to upload
</button>
</div>
</div>
<input id="dz-submit" type="submit" value="submit">
</form>
Dropzone.autoDiscover = false;
new Dropzone("#upload",{
clickable: ".dropzone",
url: "upload.php",
previewsContainer: "#previewsContainer",
uploadMultiple: true,
autoProcessQueue: false,
init() {
var myDropzone = this;
this.element.querySelector("[type=submit]").addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
});
Here is my sample, is based on Django + Dropzone. View has select(required) and submit.
<form action="/share/upload/" class="dropzone" id="uploadDropzone">
{% csrf_token %}
<select id="warehouse" required>
<option value="">Select a warehouse</option>
{% for warehouse in warehouses %}
<option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
{% endfor %}
</select>
<button id="submit-upload btn" type="submit">upload</button>
</form>
<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
var filename = "";
Dropzone.options.uploadDropzone = {
paramName: "file", // The name that will be used to transfer the file,
maxFilesize: 250, // MB
autoProcessQueue: false,
accept: function(file, done) {
console.log(file.name);
filename = file.name;
done(); // !Very important
},
init: function() {
var myDropzone = this,
submitButton = document.querySelector("[type=submit]");
submitButton.addEventListener('click', function(e) {
var isValid = document.querySelector('#warehouse').reportValidity();
e.preventDefault();
e.stopPropagation();
if (isValid)
myDropzone.processQueue();
});
this.on('sendingmultiple', function(data, xhr, formData) {
formData.append("warehouse", jQuery("#warehouse option:selected").val());
});
}
};
</script>
This is just another example of how you can use Dropzone.js in an existing form.
dropzone.js :
init: function() {
this.on("success", function(file, responseText) {
//alert("HELLO ?" + responseText);
mylittlefix(responseText);
});
return noop;
},
Then, later in the file I put
function mylittlefix(responseText) {
$('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}
This assumes you have a div with id #botofform that way when uploading you can use the uploaded files' names.
Note: my upload script returned theuploadedfilename.jpeg
dubblenote you also would need to make a cleanup script that checks the upload directory for files not in use and deletes them ..if in a front end non authenticated form :)
Try this
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
</div>
JS
<script>
Dropzone.autoDiscover = false;
Dropzone.default.autoDiscover=false;
$("div#myDrop").dropzone({
url: "/file/post",
});
</script>
I have an application (drag and drop using JqueryUI.GridSort) that allows the user to upload photos, and then sort the photos in the order that they would like using drag and drop.
On page load, the user is prompted to upload photos which are posted to the next page. When they arrive on the next page my php script creates a <ul id="sortable"> containing <li> for each of the files they uploaded. For each picture that they have uploaded to the site, a new <li> is created. Inside of that <li> is a <img> that sets the picture for <li> with the image they have uploaded.
My goal is to be able to "save" the order of the pictures after they have arranged them in the drag and drop interface. For example, once they have finished arranging and sorting the pictures in the order they want them in, I would like to be able to send them another page that creates an xml file ( I don't need help with the XML, only saving the order) with using the list that they created in the correct order.
After hours of tinkering with PHP, I have come to realization that because PHP is a serverside language, it cannot see what is sorted post render. So my question is, is there a way to have JavaScript or Ajax read the current order of the list, and post it to the next page? If you do know how, could you please provide an example of both the POST from one page, and the post receiving on the other? I am not very familiar with Ajax.
Thank you greatly for any assistance you could provide.
Sample Code (The contents of the foreach statement that creates a LI for each file uploaded)
$imgID++;
echo '<li class="ui-state-default"><img id="'.$imgID.'"'.' src="user_files/'.$file_name.'" draggable="true" height="90" width="95"></li>';
EDIT
main page :
<script>
$('#my_form').on('submit', function() {
var ordered_list = [];
$("#sortable li img").each(function() {
ordered_list.push($(this).attr('id'));
});
$("#ordered_list_data").val(JSON.stringify(ordered_list));
});
</script>
<div id="tesT">
<form id="my_form" action="update_data.php">
<!-- other fields -->
<input type="hidden" id="ordered_list_data"></input>
<input type="submit" value="Proceed to Step 2"></input>
</form>
</div>
update_data.php:
<?php
// process other fields as normal
if(isset($_POST['ordered_list_data'])) {
$img_ordering = json_decode($_POST['ordered_list_data']);
echo "1";
} else {
echo "nodata";
}
// do things with the data
?>
I built a JSFiddle doing basically the same thing that David posted.
I added a piece to write out the result to a div on the page, so you can see what's going on:
<input type="button" id="savebutton" value="save"/>
<div id="output"></div>
<form id="listsaveform" method="POST" action="script.php">
<input type="hidden" name="list" id="hiddenListInput" />
</form>
Javascript:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
});
var LISTOBJ = {
saveList: function() {
var listCSV = "";
$( "#sortable li" ).each(function() {
if (listCSV === "") {
listCSV = $(this).text();
} else {
listCSV += "," + $(this).text();
}
});
$("#output").text(listCSV);
$("#hiddenListInput").val(listCSV);
//$("#listsaveform").submit();
}
}
If you're using a <form> you can do something like this (assuming jQuery is being used):
$('#my_form').on('submit', function() {
var ordered_list = [];
$("#sortable li img").each(function() {
ordered_list.push($(this).attr('id'));
});
$("#ordered_list_data").val(JSON.stringify(ordered_list));
});
In essence, what you're doing is looping over the <ul>, fetching each <img> and appending the ids (in order of appearance) to an array. Arrays preserve ordering in JavaScript and JSON, so one can turn it into a JSON string using the JSON.stringify function, set it as the value of a <input type="hidden"> field and then submit the form.
If you want to use AJAX, the functionality is very similar. However, instead of using an onsubmit (or onclick) you'd use $.post.
Let's go with the <form> option since it's simpler. All told you'll have something similar to the above JS along with HTML like this:
<form id="my_form" method="post" action="./update_data.php">
<!-- other fields -->
<input type="hidden" name="ordered_list_data" id="ordered_list_data"></input>
<input type="submit" value="Submit"></input>
</form>
Then, in update_data.php (or whatever your script is named):
<?php
// process other fields as normal
if(isset($_POST['ordered_list_data'])) {
$img_ordering = json_decode($_POST['ordered_list_data']);
} else {
// handle case where there is no data
}
// do things with the data
?>
I am working on a view containing two forms, handled by separate controller actions which return a string serilaized to Json:
return Json(message);
The forms are submitted using jQuery, by clicking on a button outside the two forms.
The button handler:
$('#inviteForm').ajaxSubmit({
success: function(html, status) {
$("#response").text(html);
}
})
$('#trialForm').ajaxSubmit({
success: function(html, status) {
$("#response").append(html);
}
});
The browser receives the result and prompts the user to download as it is interpreted as "application/json".
However, if I only submit one of these forms in the jQuery, the resulting Json message is displayed as a string in the #response element as desired.
Why does adding a second ajaxSubmit() cause this different behaviour?
Thanks.
The view contains the following forms:
<form action="/Controller1/SaveAttachments/<%=Model.ObjectId %>" id="trialForm" method="post" enctype="multipart/form-data">
<input type="file" name="trialForm" size=30/>
<input type="file" name="trialSheet" size=30/>
<input type="file" name="trialApproval" size=30/>
</form>
and...
<form action="/Controller1/UpdateTemplate/<%=Model.ObjectId %>" id="inviteForm" method="post" enctype="multipart/form-data">
<%=Html.TextArea("invitationSheet", Model.InvitationSheet,
new { #name = "invitationSheet"})
<script type="text/javascript">
window.onload = function() {
var sBasePath = '<%=Url.Content("~/Content/FCKeditor/")%>';
var oFCKeditor = new FCKeditor('invitationSheet');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.HtmlEncodeOutput = true;
oFCKeditor.ReplaceTextarea();
}
</script>
</form>
Update:
You can't upload files directly via AJAX so it is doing an actual post of the form containing file inputs. You should look at a plugin that will let you upload files using the hidden iframe technique that works asynchronously instead of trying to upload using AJAX.