This question is about: https://github.com/blueimp/jQuery-File-Upload
This question is very specific. I did not develop the code so I don't know where went wrong at when.
I copied to whole repository to my Windows web host running PHP 5.3 following the setup , however, using Firefox and Chrome to visit the demo page, I can upload but cannot delete. The Windows server is old , still running IIS6 .
The console has logged:
Firefox:
no element found
Chrome:(1st click)
Failed to load resource: the server responded with a status of 501 (Not Implemented) :http://webhost/folder/jquery-file-upload/server/php/?file=xxx.jpg
Chrome:(2nd click)
DELETE http://webhost/folder/jquery-file-upload/server/php/?file=xxx.jpg 501 (Not Implemented)
jquery.min.js:4
send jquery.min.js:4
n.extend.ajax jquery.min.js:4
$.widget.options.destroy jquery.fileupload-ui.js:377
$.Widget._trigger jquery.ui.widget.js:489
$.widget._deleteHandler jquery.fileupload-ui.js:537
(anonymous function) jquery.ui.widget.js:105
handlerProxy jquery.ui.widget.js:406
n.event.dispatch jquery.min.js:3
r.handle jquery.min.js:3
And that linked to php:1
with this:
{"file":{"name":"xxx.png","size":14339,"url":"http:\/\/webhost\/folder\/jquery-file-upload\/server\/php\/files\/xxx.png","thumbnailUrl":"http:\/\/www.newman.edu.hk\/appreciate\/jquery-file-upload\/server\/php\/files\/thumbnail\/xxx.png","deleteUrl":"http:\/\/webhost\/folder\/jquery-file-upload\/server\/php\/?file=xxx.png","deleteType":"DELETE"}}
I tried to check the UploadHandler.php
but the whole file seems cryptic to me x_x
Here reporting, for whatever reason. I tried that again with the latest library and it worked. Sorry I can't provide further details or help you if you are currently frustrated because I never recorded them. :(
Anyway, that is how I solved the problem.
I am also sorry to say the other answers didn't work for me and I didn't remember to comment because I can't access the server at home and forgot after fiddling with it. Please forgive me :P
PS I also switched to Dropzone.js because jQuery File Upload is too uneasy to use. I personally think Dropzone.js allows more freedom because it doesn't require any dependencies.
Here is how they themed Dropzone.js to look like jQuery File Upload: http://www.dropzonejs.com/bootstrap.html
I just lost few hours with this issue... Could also upload and not DELETE... I created a custom ajax function to delete the files manually... and once I was trying to remove the 501 error... I found this in the UploadHandler.php
// Set the following option to 'POST', if your server does not support
'delete_type' => 'DELETE',
My VPS server was not allowing DELETE requests... as soon I changed this line to 'POST', it ws working with no more 501 errors...
I have solved it by putting my own delete button code and the Ajax script.
HTML
Replace this:
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<a href="javascript:void(0)" class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="fa fa-trash"></i>
</a>
With this:
<button type="button" class="btn btn-danger delete_us">
<span>Delete</span>
</button>
<a href="javascript:void(0)" class="delete_me" data-name="{%=file.name%}" data-url="{%=file.url%}" data-thumb="{%=file.thumbnailUrl%}">
<i class="fa fa-trash"></i>
</a>
jQuery
//Delete images on select all button
jQuery(document).on('click', '.delete_us', function() {
var total = jQuery('[name="delete"]:checked').each(function() {
jQuery(this).parent().find('.delete_me').trigger('click');
});
});
//Delete single image
jQuery(document).on('click', '.delete_me', function() {
jQuery(this).parents('.template-download').addClass('active');
var data_thumb = jQuery(this).data('thumb');
data_thumb = data_thumb.split('thumbnail');
data_thumb = data_thumb[0]+'thumbnail/';
var data_name = jQuery(this).data('name');
var data = data_thumb+data_name;
jQuery.ajax({
data : { dataThumb: data },
url : "<?php echo JURI::root().'ajax.php' ?>",
type : 'post',
success : function(data) {
jQuery('.template-download.active').fadeOut(500);
}
});
});
AJAX FILE
<?php
//Ajax file
$data = $_POST;
if($data['dataThumb']) {
deleteMe($data['dataThumb']);
}
function deleteMe($data) {
$data = str_replace(JURI::root(), JPATH_BASE.'/', $data);
$thumb = str_replace('thumbnail/', '',$data);
unlink($data);
unlink($thumb);
}
?>
Note: Please replace Joomla standard URLs in the code with your appropriate URLs.
The HTTP 'DELETE' request by jQuery-File-Upload Plugin was not working in my project too, so I have make custom code to delete images. I hope this would solve your problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.