jquery ajax发送delete(use in jquery file upload delete file)

环境:

  1. jQuery file upload 

HTML example code

 

 1 <div class="pic-preview">
 2     <div class="pic"></div>
 3 </div>
 4 <div class="pic-action">
 5      <span class="btn btn-success fileinput-button">
 6         <i class="glyphicon glyphicon-plus"></i>
 7         <span>上傳圖片</span>
 8         <!-- The file input field used as target for the file upload widget -->
 9         <input id="fileupload" type="file" name="files[]">
10     </span>
11 </div>
12 <div id="progress" class="progress">
13     <div class="progress-bar progress-bar-success"></div>
14 </div>
15 
16 <input type="hidden" name="pic" id="pic" value="">

 

Javascript:

 

 1 (function(){
 2      $(function(){
 3        //init fileupload
 4         $('#progress').hide();
 5         var url = '<?php echo $dn.'Uploader.php';?>';
 6         $('#fileupload').fileupload({
 7             url: url,
 8             dataType: 'json',
 9             done: function (e, data) {
10                 $.each(data.result.files, function (index, file) {
11                     $(".pic").empty().append('<img src="'+file.thumbnailUrl+'">');
12                     $("#pic").val(file.name);
13                     $(".pic-action").append('<span class="btn btn-danger" data-type="'+file.delete_type+'" data-url="'+file.deleteUrl+'" onclick="removePic(this)" >刪除</span>');
14                 });
15                 $('#progress').hide();
16             },
17             progressall: function (e, data) {
18                 $('#progress').show();
19                 var progress = parseInt(data.loaded / data.total * 100, 10);
20                 $('#progress .progress-bar').css(
21                     'width',
22                     progress + '%'
23                 );
24             }
25         }).prop('disabled', !$.support.fileInput)
26             .parent().addClass($.support.fileInput ? undefined : 'disabled');
27     });
28 })();

 

 

 

最终效果是:

 

 

参考链接: How to send a PUT/DELETE request in jQuery?

 

posted @ 2015-10-20 11:55  五毛钱的饼  阅读(970)  评论(0)  编辑  收藏  举报