jquery ajax发送delete(use in jquery file upload delete file)
2015-10-20 11:55
477 查看
环境:
jQuery file upload
HTML example code
Javascript:
最终效果是:
参考链接: How to send a PUT/DELETE request in jQuery?
jQuery file upload
HTML example code
<div class="pic-preview"> <div class="pic"></div> </div> <div class="pic-action"> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>上傳圖片</span> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="files[]"> </span> </div> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> <input type="hidden" name="pic" id="pic" value="">
Javascript:
(function(){ $(function(){ //init fileupload $('#progress').hide(); var url = '<?php echo $dn.'Uploader.php';?>'; $('#fileupload').fileupload({ url: url, dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $(".pic").empty().append('<img src="'+file.thumbnailUrl+'">'); $("#pic").val(file.name); $(".pic-action").append('<span class="btn btn-danger" data-type="'+file.delete_type+'" data-url="'+file.deleteUrl+'" onclick="removePic(this)" >刪除</span>'); }); $('#progress').hide(); }, progressall: function (e, data) { $('#progress').show(); var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); } }).prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); }); })();
最终效果是:
参考链接: How to send a PUT/DELETE request in jQuery?
相关文章推荐
- SSH+Jquery+Ajax框架整合
- spring mvc的表单值与jquery互传
- Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值
- jquery设置页面元素为只读
- jQuery 小技巧
- jquery生成UUID的方法
- jquery设置控件不能复制粘贴
- jquery form插件(ajax)上传文件实现及原理
- data 原生用法 jquery 用法
- jquery插件下载地址
- AJAX(三)jQuery AJAX.post
- jQuery滚动监听插件Waypoints
- Jquery Slick幻灯片插件
- jQuery Validate
- 无缝连续滚动
- jQuery框架学习笔记一
- Jquery easyui datagrid在IE 9浏览器下,删除数据后,页面刷新数据仍显示的问题。
- Study JQuery《data的实现方式》
- AJAX(二)jquery ajax
- 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)