File is not uploading using Ajax/JQuery but uploading using Form submit -

File is not uploading using Ajax/JQuery but uploading using Form submit -

i trying upload file using using ajax/jquery, actual image file not getting uploaded, instead 0 byte file named "object_filelist" getting created on destination directory.

this jquery code.

$('#fileupload').click(function() { alert ('reached here'); var photo_data = $("#photo")[0].files; // getting properties of file file field var form_data = new formdata(); // creating object of formdata class form_data.append('photo', photo_data); $.ajax({ url: "upload.pl", cache: false, contenttype: false, processdata: false, data: form_data, // setting info attribute of ajax file_data type: 'post', success : function(response) { alert ("success"); }, error: function(xmlhttprequest, textstatus, errorthrown) { alert ("script error"); }, // error }); });

html code

<input id="photo" type="file" name="photo" /> <button type='button' id='fileupload' class='btn btn-primary btn-sm'> <span class='glyphicon glyphicon-upload'></span> start upload </button>

perl script

#!c:/perl64/bin/perl.exe utilize strict; utilize cgi; utilize cgi::carp qw ( fatalstobrowser ); utilize file::basename; $cgi::post_max = 1024 * 5000; $safe_filename_characters = "a-za-z0-9_.-"; $upload_dir = "c:/users/public/"; $cgi = new cgi; $filename = $cgi->param("photo"); if ( !$filename ) { print $cgi->header ( ); print "there problem uploading photo (try smaller file)."; exit; } ( $name, $path, $extension ) = fileparse ( $filename, '..*' ); $filename = $name . $extension; $filename =~ tr/ /_/; $filename =~ s/[^$safe_filename_characters]//g; if ( $filename =~ /^([$safe_filename_characters]+)$/ ) { $filename = $1; } else { die "filename contains invalid characters"; } $upload_filehandle = $cgi->upload("photo"); print $upload_filehandle; open uploadfile, ">c:/users/public/$filename" or die $!; binmode uploadfile; while ( <$upload_filehandle> ) { print uploadfile; } close uploadfile; print $cgi->header ();

i don't think there issue in perl script because if i'm using form info upload file, uploading perfectly.

<form action="upload.pl" method="post" enctype="multipart/form-data"> <input id="photo" type="file" name="photo" /> <input type="submit" name="submit" value="submit form" /> </form>

can help me wrong in first case. (uploading using ajax/jquery)??

you asked similar question yesterday, seem have changed few things , broken code in different way. culprit time in javascript code:

var photo_data = $("#photo")[0].files;

this returns filelist object, makes content of ajax request this:

-----------------------------195229089014926488201584712872 content-disposition: form-data; name="photo" [object filelist] -----------------------------195229089014926488201584712872--

this not going work, since you're not sending actual contents of file. send contents of first file in list, do:

var photo_data = $("#photo")[0].files[0];

or, since jquery isn't necessary here, simply

var photo_data = document.getelementbyid("photo").files[0];

this sets content of request more like:

-----------------------------4576019836610138732026194501 content-disposition: form-data; name="photo"; filename="foo.txt" content-type: text/plain foo bar -----------------------------4576019836610138732026194501--

note you'll have create additional changes code if want upload binary file image.

also note perl script has security holes should fixed, notably:

never allow users determine filenames or paths on system. use 3-argument form of open, e.g. open $fh, '<', $file or die "$file: $!";

there more, ones jump out @ glance.

a note troubleshooting

for whatever reason, in code posted yesterday had

var file_data = $("#avatar").prop("files")[0];

which work if changed selector $("#photo"). i'm not sure why made change, because broke otherwise-working javascript code.

that's why in troubleshooting, should create 1 alter @ time help isolate cause of issue. if create 2 changes @ once, 1 might prepare previous issue while other 1 introduces new bug.

also, recommend create liberal utilize of browser's developer tools troubleshooting javascript code. allow examine exact parameters , content beingness sent in ajax requests, how tracked downwards bugs in both of questions.

jquery ajax perl file-upload image-uploading