环境:

  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. zabbix监控域名带宽

    代码地址:https://github.com/Ma-Jing/python/blob/master/ngxv2_traffic_daemon.py READ.md里有使用说明! #!/usr/bin ...

  2. C语言基础--宏

    宏在C语言中经常使用,在linux的源码中可以看到很多宏的高级应用.因此不理解宏,就很难理解代码.本文参考一些互联网资料做一些总结,希望给大家带来帮助. 先说说使用宏的优点及缺点: 优点: 1.提高代 ...

  3. 【暑假】[深入动态规划]UVa 1380 A Scheduling Problem

     UVa 1380 A Scheduling Problem 题目: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=41557 ...

  4. 深入浅出 JavaScript 变量、作用域和内存 v 0.5

    本文主要从原理入手分享变量和作用域的相关知识,最后结合本文所分享知识,再次深入了解下闭包的运行原理. 主要参考<JS高级程序设计> <JS权威指南> <高性能 JS> ...

  5. 关于win10安装VisualSVN遇到的一个问题及解决办法

    问题:在win10系统中安装VisaulSVN遇到问题,错误提示:There is problem with this Windows Installer package. A DLL require ...

  6. [iOS基础控件 - 5.2] 查看大图、缩放图片代码(UIScrollView制作)

    原图: 900 x 1305      拖曳滚动:   缩放:           主要代码: // // ViewController.m // ImageZoom // // Created by ...

  7. 转载.Net MVC中Html.RenderPartial和Html.RenderAction 的应用与区别

    Html.Partial方法:是将视图内容直接生成一个字符串并返回, Html.RenderPartial方法是直接输出至当前HttpContext, 而Html.RenderAction还调用一下A ...

  8. 【每天一个Linux命令】10. 用户账号的新建/修改/删除以及密码修改 useradd/usemod/userdel/passwd

    在 Linux 系统中,与用户管理有关的文件主要有如下几个:分别是/etc/passwd,/etc/shadow,/etc/gfoup,/etc/gshadow .它们分别与用户的账号,密码,用户组及 ...

  9. hibernate学习五(关系映射多对一与一对多)

    一.多对一 多对一(或者一对多):在学生与老师的情况下,一个老师可以教多个学生,但一个学生只能被教一个老师教: 对于类:在多的那方拥有一的那方的一个实体 二.修改student.java和teache ...

  10. 剑指OFFER之数组中出现次数超过一半的数字(九度OJ1370)

    题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2 ...