环境:

  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. bzoj 1095 [ZJOI2007]Hide 捉迷藏(括号序列+线段树)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1095 [题意] 给定一棵树,树上颜色或白或黑而且可以更改,多个询问求最远黑点之间的距离 ...

  2. 【暑假】[深入动态规划]UVAlive 3983 Robotruck

     UVAlive 3983 Robotruck 题目: Robotruck   Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format ...

  3. jenkins api调用

    在使用jenkins的时候,有时候需要其他外部调用,下面是调用方法,不定期更新 job调用 使用user和password: curl -X POST "jobPath/buildWithP ...

  4. android学习之activity

    Activity 的生命周期 和 J2ME 的 MIDlet 一样,在 android 中,Activity 的生命周期交给系统统一管理.与 MIDlet 不同的是安装在 android 中的所有的 ...

  5. 【解决】Django项目废弃SQLite3拥抱MySQL

    SQLite3数据库就一个文件,拷贝着随时带走,调试方便,超级轻量级,有它的好处. 不过,MySQL才是中小项目的主流,最近想把Django里程碑项目部署到SAE上,所以试着把原来的项目数据库替换成M ...

  6. leetcode@ [54/59] Spiral Matrix & Spiral Matrix II

    https://leetcode.com/problems/spiral-matrix/ Given a matrix of m x n elements (m rows, n columns), r ...

  7. POJ-2926 Requirements 最远曼哈顿距离

    题目链接:http://poj.org/problem?id=2926 题意:求5维空间的点集中的最远曼哈顿距离.. 降维处理,推荐2009武森<浅谈信息学竞赛中的“0”和“1”>以及&l ...

  8. openstack python sdk list tenants get token get servers

    1,openstack python sdk 获取token 获取租户tenants projects #!/bin/bash export OS_PROJECT_DOMAIN_ID=default ...

  9. Python解释器

    当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件. 由于整个Python语言从规范到解释器都是开源的 ...

  10. RC522天线匹配参数【worldsing笔记】

    图为Device读卡器的参数值 EMC电路对读写距离影响不大:                   L3 和L4 固定为2.2uH:                  C11和C12也是固定值,如果P ...