jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2017-06-23 15:00 我要评论( )

jquery.fileupload插件的简易使用日志 ,游戏开发者社区

本文内容主要包含fileupload插件传递参数和取回服务器返回数据的方法

jquery.fileupload官网:

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
    调用方式:
    Html代码

  • <input type="file" name="files" id="fileupload_input" />

    复制代码

    jsp代码

  • $("#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));
  •     }
  • })

    复制代码





    原文



     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    网友点评