环境:

  1. 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?

jquery ajax发送delete(use in jquery file upload delete file)的更多相关文章

  1. JQuery Ajax 发送请求成功后却接收不到任何响应数据问题

    问题描述 使用 JQuery Ajax 向后端服务器发送请求,服务器也收到请求返回了响应数据,但是 Ajax 却收不到任何响应数据. 举例如下: $.ajax({ type: "post&q ...

  2. asp.net mvc 接收jquery ajax发送的数组对象

    <script type="text/javascript"> $(function () { var obj = { name: "军需品", m ...

  3. jQuery.ajax发送image请求格式

    1\请求端 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head run ...

  4. jQuery file upload --Multiple File Input Fields in One Form

    The plugin can be applied to a form with multiple file input fields out of the box. The files are se ...

  5. jQuery.ajax() 函数详解

    jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...

  6. jquery ajax 保存讲解

    jquery ajax 参数传递与数据保存实例是一款适合于初学者用的,首先我们是讲一下关于如何利用ajax +php进行数据操作,然后再详细的介绍关于jquery ajax的帮助说明. jquery ...

  7. jquery.ajax()详解

    jQuery.ajax() 函数详解 traditional 如果你希望使用传统方式来序列化参数,将该属性设为true. 传递数组时, traditional必须为true var arr = []; ...

  8. Java程序员之JS(一) 之 JQuery.ajax

    背景:紧着现在项目的需要,先从JQuery.ajax出发,主要需求是通过 js 调用Java 代码,从而适应现在的项目. 先从几个概念开始讲解: 一. 什么是Deferred  Deferred 对象 ...

  9. 原生Ajax--XmlHttpRequest对象和jQuery.ajax()

    Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE) 1.XmlHttpRequest对象介绍 XmlHttpRequest对象的主要 ...

随机推荐

  1. Makefile学习与进阶之Makefile.am和$$(M)的意思

    (1)makefile 中,出现$$(M) 是什么意思,发现还是看实际的Makefile长知识啊 在makefile中,会经常使用shell命令,也经常见到$var 和 $$var的情况,有什么区别呢 ...

  2. mvc5入门,经典教程。。

    转子 http://www.yanjinnan.com/archives/category/tech/efmvc ASP.NET MVC 5  一 入门 发表于2013 年 8 月 12 日由颜晋南 ...

  3. PHP生成各种验证码和Ajax验证

    网址:http://www.helloweba.com/view-blog-191.html 源码下载地址: http://files.cnblogs.com/h07061108/php%E9%AA% ...

  4. 你所不知道的五件事情--java.util.concurrent(第一部分)

                                                                这是Ted Neward在IBM developerWorks中5 things ...

  5. Java网络编程(模拟浏览器访问Tomcat服务器)

    程序运行结果: HTTP/1.1 404 Not FoundServer: Apache-Coyote/1.1Content-Type: text/html;charset=utf-8Content- ...

  6. DELPHI 数学函数+字符处理函数

    System单元 Trunc(1234.5678);{1234} Trunc(-1234.5678);{-1234} Round(1234.5678);{1235} Round(-1234.5678) ...

  7. 关于PCB布线的顺序到底是怎样才合理?

    有人说先布好电源线和地线,让它们尽量靠近走,然后再考虑信号线:也有人说先布好关键的信号线,然后再走电源和地线:还有人说先布好电源线,再布信号线,地线最后布.到底怎么样才算好呢?或者说,一般应按照什么顺 ...

  8. Java数组的内存管理

    Java数组的内存管理 Java语言是典型的静态语言,因此Java的数组是静态的,即当数组被初始化之后,该数组的长度是不可变的.Java程序中的数组必须经初始化才能使用.所谓初始化,就是当数组对象的元 ...

  9. 第1组UI组件:布局管理器

    1 布局管理的来源 为了让UI在不同的手机屏幕上都能运行良好----不同手机屏幕的分辨率/尺寸并不完全相同,如果让程序手动控制每个组件的大小.位置,会给编程带来巨大的麻烦.为了解决这个问题.andro ...

  10. 如何创建一个有System用户权限的命令行

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何创建一个有System用户权限的命令行.