环境:

  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. python def说明

    可以这样讲,def定义了一个模块的变量,或者说是类的变量.它本身是一个函数对象.属于对象的函数,就是对象的属性.当然,你也可以叫它“方法”. python 的函数和其他语言的函数有很大区别.它是可以被 ...

  2. 自己常用的js方法

    $(function(){ tabview("#zcfw_list1"); tabview("#zcfw_list2"); tabview("#zcf ...

  3. 【转载】高性能I/O设计模式Reactor和Proactor

    转载自:http://blog.csdn.net/roger_77/article/details/1555170 昨天购买了<程序员>杂志 2007.4期,第一时间去翻阅了一遍,其中有一 ...

  4. 【openstack报错】【metadata问题】‘http://169.254.169.254/2009-04-04/meta-data/instance-id’ failed : url error [[Errno 111] Connection refused]

    [时间]2014年2月25日 [平台]ubuntu 12.04.3 openstack havana  with nova-network in multi-host [日志]实例启动时输出的日志内容 ...

  5. linux之C编程实战小例

    人生匆匆一趟,打不打酱油?怎么打?怎么打"质量好点的酱油"?由你决定.打酱油是一种态度,更是一种生活! 哈哈,事不关己不开口,专心一意打酱油! 请记住下面些许话: 不要一味的说别人 ...

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

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

  7. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  8. 解决eclipse 使用run运行,始终会跳到debug模式!

    查看此选项是否选择中卫always,若是,更改为never或prompt,重启eclipse即可

  9. C#操作sql通用类 SQLHelper

    Codeusing System; using System.Data; using System.Configuration; using System.Web; using System.Web. ...

  10. JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把: index.html 页面展示代码 <!DOCTYPE html PUBLIC " ...