`
yixiandave
  • 浏览: 140343 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery.fileupload插件的简易使用日志

    博客分类:
  • js
阅读更多
本文内容主要包含fileupload插件传递参数和取回服务器返回数据的方法

jquery.fileupload官网:http://blueimp.github.io/jQuery-File-Upload/

fileupload是一个jquery下的ajax文件上传插件

下载下来的包东西很多,很多也是没必要的,这里只谈谈最小级别的应用

首先,依赖js:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

缺一不可(如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入)
大部分资料其实官网上都能找到,说点官网没有的或者说的不够清楚的
附上官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API

调用方式:
<input type="file" name="files" id="fileupload_input" />

$("#fileupload_input").fileupload({
    url:"files/upload",//文件上传地址,当然也可以直接写在input的data-url属性内
    formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加
    done:function(e,result){
        //done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
        //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
        //返回的数据在result.result中,假设我们服务器返回了一个json对象
        console.log(JSON.stringify(result.result));
    }
})
2
4
分享到:
评论
4 楼 love_chengjiang 2014-08-06  
都是这句话惹的祸:
“如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入”
不加入jquery.ui.wiget.js,是不会自动提交的。
3 楼 yixiandave 2014-05-09  
rjw 写道
楼主,你这么写,能跑起吗?只能选择文件,不能提交啊。 求教了。。。

之前的项目找不到了,印象中选完文件会直接提交的
2 楼 rjw 2014-05-08  
楼主,你这么写,能跑起吗?只能选择文件,不能提交啊。 求教了。。。
1 楼 lr2007 2014-02-18  
写的啥子嘛
晕哦

相关推荐

    jquery.fileupload.js插件使用demo下载

    要使用 `jquery.fileupload.js`,首先需要在项目中引入 jQuery 和该插件的文件。通常包括以下文件: - jQuery 库(如 `jquery.js`) - `jquery.fileupload.js` - 可能还需要其他辅助文件,如 `jquery.ui.widget....

    jquery.fileupload.js

    《jQuery.fileupload.js:深入解析文件上传插件的精髓》 在Web开发中,文件上传功能是不可或缺的一部分,尤其在用户交互丰富的应用中。jQuery.fileupload.js作为一个强大的jQuery插件,为开发者提供了高效、易用的...

    jquery.fileupload.js相关js文件

    在Web开发中,文件和图片上传功能是一项不可或缺的功能,而jQuery.fileupload.js是实现这一功能的优秀插件。它以其简洁的API和强大的功能,使得文件上传变得更加简单易用。本文将详细探讨jQuery.fileupload.js的相关...

    jquery.fileupload插件及依赖.7z

    jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。经本人汇总与大家分享

    jQuery-File-Upload-9.11.2(完整版,插件已下载).zip

    jQuery-File-Upload-9.11.2(完整版,插件已下载),官方的很多引用文件都是线上的,加载很慢,下载到本地后更靠谱,这个版本是已经整理好的,直接调用后台php的部分也在其中,可以直接应用到项目中,直接拷贝过去就...

    com.springsource.org.apache.commons.fileupload-1.2.0.jar

    jar包资源分享,你懂的: com.springsource.org.apache.commons.fileupload-1.2.0.jar

    org.apache.commons.fileupload.DiskFileUpload使用上

    `org.apache.commons.fileupload.DiskFileUpload` 是 Apache Commons FileUpload 模块中的一个类,主要用于处理 HTTP 请求中的文件上传。这个类实现了基于磁盘的文件上传存储策略,当上传文件大小超过内存阈值时,它...

    jqueryfileupload 客户端和服务端所需要的js文件

    1. `jquery.fileupload.js`: 这是主要的`jQuery File Upload`脚本,实现了文件选择、上传、进度显示等功能。它与HTML5的File API紧密集成,支持HTML5的拖放特性。 2. `jquery.fileupload-ui.js`: 提供了用户界面元素...

    com.springsource.org.apache.commons.fileupload-1.2.1.jar

    com.springsource.org.apache.commons.fileupload 自己打入本地Jar包即可

    利用org.apache.commons.fileupload上传多个文件

    import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.log4j.Logger; public class FileServlet extends ...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    本篇将深入探讨jQuery的核心库以及两个重要的插件——jQuery File Upload和jQuery Iframe Transport。 首先,jQuery的核心库jQuery-1.8.3.min.js和jQuery-2.1.4.min.js是其发展过程中的两个稳定版本。1.8.3属于1.x...

    jQuery File Upload文件上传插件 v10.32.0.zip

    1. **jQuery集成**:该插件基于广泛使用的jQuery库,因此它易于理解和集成到任何使用jQuery的项目中。通过使用jQuery的事件处理和选择器功能,可以轻松定制和扩展上传行为。 2. **多文件上传**:jQuery File Upload...

    基于apache commons.fileupload的文件上传组件,改进了上传速度

    使用本程序时,注意上传端的参数设置,文件路径在前,文件附件在后,一次上传一个文件 StringPart filePathPart = new StringPart("filePath", "111/"+targetFile.getName(), "utf-8"); FilePart part = new ...

    基于apache commons.fileupload的文件上传组件

    8. **安全性考虑**:使用FileUpload时,需要确保安全措施到位,避免路径遍历攻击、文件覆盖等风险。例如,应避免将文件保存在Web根目录下,防止直接访问,以及使用随机或时间戳生成的文件名。 在创建一个基于Apache...

    jquery.ui.widget.js

    在文件上传场景中,jQuery UI Widget的使用主要体现在`jquery.fileupload.js`插件上。这个插件扩展了基本的HTML `&lt;input type="file"&gt;`元素,增加了多种功能,如多文件选择、文件预览、进度条显示以及我们重点关注的...

    分享2个jQuery插件--jquery.fileupload与artdialog

    在本文中,我们将深入探讨两个常用的jQuery插件:jquery.fileupload和artdialog。这两个插件在Web开发中具有广泛的应用,特别是在需要处理文件上传和弹出对话框的场景。 首先,我们来了解一下`jquery.fileupload`。...

Global site tag (gtag.js) - Google Analytics