I'm using Jqgrid and Ajaxfileupload to upload a file. It works fine but when I'm going to upload another file in the form appears the file that I have upload. I would like to clear the file fields
This is my code
afterSubmit : function(response, postdata){
var respuesta = response.responseText;
var param = $("#resTables").jqGrid('getCell',lastSel,'idProyecto');
$.ajaxFileUpload({
url: "doajaxfileupload.php?imagen=&tabla=proyectos&categoria="+ param,
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json'
});
Related
I am trying to upload images using file-uploader jquery plugin. But i am getting "Cross-Origin Request Blocked" and not getting any response. Here is one thing my file is place on another server and my ajax url is different
Please check below my code:-
var url = 'mysite/upload.php';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
alert(data)
}
});
Please update me how this will fix.
Well the thing is there is already a edited form with a lot of fields but all the save and validate goes trough ajax.
They asked me now to put a file upload , i tough that just will be set a input and get it on back , but since all goes trough ajax i cant.
I don't want to change all the function and go trough a submit if it's not necessary.
I looked for some uploaders of file trough ajax but all of them are type drag and drop and i don't like them because y only need a simple file.
And the ones that i found that looked simple where in flash...
Is there any simple script that allows me to upload a simple file trough ajax without need of change the type of submitting the fields.
Thank's in advance mates ;)
//the js that saves all the inputs
function _edit_campaign(){
var data = formvalues_inspinia("body");
data.action=_action;
data.status=$("#smf_ior_status").val();
$.ajax({
url: "/save_changes",
dataType: "json",
data: data,
method:"POST",
success: function (response) {
if(!response.status){
toastr_error(response.desc);
$( "#submit_confirm" ).prop( "disabled", false );
$("#"+response.camp).focus();
}else{
toastr_success(response.desc);
}
}
});
}
client side
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
});
server side
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
You can achieve this in simpler way using "ajaxSubmit".
Include jquery.form.js on your page and submit your form.
$(form).ajaxSubmit({
url: url,
type: "POST",
success: function (response) {
// do what you need with response
});
It sends all form data including file on server then you can handle these data in regular manner.
Hi there Stackoverflow. I am trying to call a PHP script via AJAX that will create and download a CSV file. I know this isn't normally supposed to be done, however I would like to do it this way.
My ajax below returns the csv data as shown by this output:
$.ajax({
type: "POST",
url: "<?=site_url('front_office/get_csv/')?>",
data: {hashed_center_ids : hashed_center_ids, print_data : print_data},
dataType: "text",
success: function(response) {
console.log(response)
var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(response);
window.open(uri, 'test.csv');
}
});
The problem is that using the lines
var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(response);
window.open(uri, 'test.csv');
does not download the file as a CSV. But rather it give it no extension with the name "download". Does anybody know how can I make it so it downloads with the .csv extension? Thanks.
I can't comment, so: You can change the name of the csv by adding following to the header
filename=whatever.csv
I'm using a great plugin - dropzone.js (dropzonejs.com) to make my site a little more fancy when registering a new user.
Basically, the user fills out a form, drops a couple images into the "dropzone", and clicks "Submit", which fires an ajax call that posts the form to a php script.
I have dropzone parameters set to enqueForUpload:false, which keeps the files from auto-uploading, since I need them to upload into uploads/$userid, after the new user id has been created. I can give dropzone header params, which I'm assuming post to the url, similar to an ajax call, instead of data: {'userid': userid}, dropzone uses headers: {'userid': userid}... However, dropzone gets initialized on document.ready, and as the userid variable isn't declared yet, dropzone fails to initialize.
I'm guessing I'm going to need to initialize dropzone with document.ready, but not give it headers just yet. Then after the ajax form processing is successful and returns userid, call dropzone to upload and give it the headers at that point. Problem is, I don't know what code would need to be called to make that happen.
Initialize Dropzone on ready:
$(document).ready(function(){
$('#dropzone').dropzone({
url: 'dropzoneprocess.php',
maxFilesize: 1,
paramName: 'photos',
addRemoveLinks: true,
enqueueForUpload: false,
});
});
Then...
$('#submit').on('click', function(){
validation crap here
$.ajax({
type: 'post',
url: 'postform.php',
data: {'various': form, 'values': here}
datatype: 'json',
success: function(data){
var userid = data.userid;
/* (and this is what I can't figure out:)
tell dropzone to upload, and make it
post userid to 'dropzone.php' */
});
});
If you use the latest Dropzone version, the parameter enqueueForUpload has been removed, in favour of autoProcessQueue which makes the whole queuing easier.
So, just call myDropzone.processQueue() as soon as you want all files to be uploaded.
To add additional parameters to the XHR you can simply register to the sending event, which gets the xhr object as second and formData as third parameter, and add the data yourself. Something like this:
myDropzone.on("sending", function(file, xhr, formData) {
// add headers with xhr.setRequestHeader() or
// form data with formData.append(name, value);
});
I used enyo answer, but i used many dropzones with data-id attribute in my page so I used:
$('div.dropzone').dropzone({
url: 'img.php'
});
var sendingHandler = function(file, xhr, formData) {
formData.append('id', $(this.element).data('id'));
};
$('div.dropzone').each(function() {
Dropzone.forElement(this).on('sending', sendingHandler);
});
I have an application where a user is allowed to save some text data into a MYSQL database through a web interface. In addition, they can also attach a file to this text and I save this into a blob field. The file types that get attached are simple .txt files.
I am able to save this data into the database but I am having trouble retrieving it. This is what I am doing to retrieve it right now:
//Events that take place when trying to retreive an attached file
function getFile(rowid){
//Make an AJAX Request to fetch the file
$.ajax({
type: 'get',
url: 'point-of-contact.php',
data: 'page=attachment&row='+rowid,
dataType: 'text',
success: function(data) {
console.log (data);
}
});
}
The AJAX request above leads to the following PHP code:
$attachments = $poc -> getPOC($_GET['row']);
header('Content-type: text/plain');
echo $attachments;
The problem I face is that when I console log the data received from the AJAX request I get this:
How do I go about getting the data in simple text format?
Could it be that the way I am uploading the file to the database is incorrect? This is how the file is uploaded to the DB:
//File upload code
var fileInput = document.getElementById('upload');
var file = fileInput.files[0];
//Hide the save button
$("#save-button-1").hide();
//Make the AJAX request
$.ajax({
type: 'post',
url: 'point-of-contact.php?page=add',
data: 'point_of_contact=' + $("#textarea1").val() + '&point_of_contact_attachment=' + file,
success: function(data) {
$('#done-1').show();
setTimeout(function() {
$('#done-1').fadeOut();
}, 2500);
$('.loader').fadeOut();
}
});
There is problem in your upload section. The line
var file = fileInput.files[0];
assignes file object into file variable. Later, when you add it to
"point_of_contact_attachment="
it gets converted to string. So you will have
"point_of_contact_attachment=[object file]"
And that is it.
try pointing the browser directly to the file instead of using ajax.
Like this
document.location = point-of-contact.php?page=attachment&row='+rowid;
Since it is not a file the browser can read, it will just download it.
However you will still need to get the TXT via ajax, because document.location redirect to the user to a plain text page.