环境:

  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. poj 1741 Tree(点分治)

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15548   Accepted: 5054 Description ...

  2. 8.2 C++ AMP advanced concepts

    C++ AMP一些更高级的概念: 1. device内存的分配和拷贝. void vecAdd(float* A, float* B, float* C, int n) { array<> ...

  3. 【Spark学习】Apache Spark安全机制

    Spark版本:1.1.1 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4135808.html 目录 W ...

  4. HW6.9

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. Sort--冒泡排序

    冒泡排序 public class BubbleSort { public static void bubblesort(int[] a){ for(int i=0;i<a.length-1;i ...

  6. leetcode@ [79/140] Trie树应用 Word Search / Word Search II

    https://leetcode.com/problems/word-search/ class Solution { public: struct Trie{ Trie *next[]; bool ...

  7. notepad 如何同时选中同一列的数据 Alt

    有时会经常遇到这种情况, 我们要选中数据中的某一列,这个在记事本中是实现不了的,不过我们可以用更高级一点的编辑器. 使用notepad可以帮助我们解决这个问题哦! 操作方法就是 按下ALT键 然后再去 ...

  8. 第十一章、认识与学习 BASH 数据流重导向

    数据流重导向就是将某个命令运行后应该要出现在屏幕上的数据, 给它导向到其他的地方,例如文件或者是装置 (例如打印机之类的)! 什么是数据流重导向 命令运行过程如下: 图 5.1.1.命令运行过程的数据 ...

  9. ALAssetsLibrary学习总结

    添加AssetsLibrary.framework 然后引入 #import <AssetsLibrary/ALAssetsLibrary.h> 一个获取所有图片的类 #import &l ...

  10. Jquery花园

    1.在线jquery  api:http://hemin.cn/jq/ 2.jquery官网:jquery.com 3.http://www.jqcool.net/ 4.http://www.fron ...