第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序,ajaxFileUpload插件依赖jquery

<script src="${base}/mobile/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="${base}/mobile/js/ajaxfileupload.js" type="text/javascript"></script>

第二步:test.html(省略无关项)

<script src="jquery-1.7.1.js" type="text/javascript"></script>
   <script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() { $.ajaxFileUpload
           (
               {
                   url: 'upload.jspx', //用于文件上传的服务器端请求地址
                   secureuri: false, //是否需要安全协议,一般设置为false
                   fileElementId: 'fileVideo', //文件上传域的ID
                   dataType: 'json', //返回值类型 一般设置为json
                   success: function (data, status)  //服务器成功响应处理函数
                   {
                       $("#imgSuccess").attr("src", data.imgurl);
                       if (typeof (data.error) != 'undefined') {
                           if (data.error != '') {
                               alert(data.error);
                           } else {
                               alert(data.msg);
                           }
                       }
                   },
                   error: function (data, status, e)//服务器响应失败处理函数
                   {
                       alert(e);
                   }
               }
)
return false;
}
</script>
<body>
<p><input type="file" id="fileVideo" name="file" /></p> <input type="button" value="上传" />
<p><img id="imgSuccess" alt="上传成功啦" src="" /></p>
</body>

第三步:java(我这里是上传到其他平台的接口,不用做参考)

@requestMapping("/upload.jspx")

public String upload(@RequestParam(required=false) MultipartFile file,HttpServletRequest request){
        String message = null;
        if(file.isEmpty()){
            return null;
        }
        String originalFilename = file.getOriginalFilename();
        String realName = request.getSession().getServletContext().getRealPath(file.getOriginalFilename());
        int i = realName.indexOf(originalFilename);
        String dir = realName.substring(0, i);
        File f = new File(dir,originalFilename);
        if(!f.exists()){
            f.mkdirs();
        }
        try {
            file.transferTo(f);
            String actionUrl = PropertyUtils.getPropertyValue(new File(realPathResolver.get(Constants.XXXXX)), BACK_UPLOAD);
            String returnUrl = com.fire.back.utils.UploadUtils.SubmitPost(actionUrl, originalFilename, "", dir);
            return returnUrl;
        } catch (Exception e) {
            message = "上传录音出错";
            log.error(message,e);
            return null;
        }  
    }

基于jquery的jqueryeasyui(类似于extjs)学习资料http://pan.baidu.com/s/1o8Koj9K

160616、jQuery插件之ajaxFileUpload及jqueryeasyui学习资料分享的更多相关文章

  1. [转]Android 学习资料分享(2015 版)

    转 Android 学习资料分享(2015 版) 原文地址:http://www.jianshu.com/p/874ff12a4c01 目录[-] 我是如何自学Android,资料分享(2015 版) ...

  2. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  3. jQuery插件之ajaxFileUpload

    原文:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html ajaxFileUpload是一个异步上传文件的jQuery插件 ...

  4. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  5. jQuery插件之ajaxFileUpload 2

      ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http ...

  6. ASP.NET- 无刷新上传使用jQuery插件之ajaxFileUpload

    灰常好,我已经使用过里面的代码了,可以用,原文地址:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFil ...

  7. jQuery插件之ajaxFileUpload[转载]

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  8. 【转】jQuery插件之ajaxFileUpload

    转自:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 说在前头,本文出自上面的作者,只是以前存的一些网址不见了,怕以后 ...

  9. jQuery插件之ajaxFileUpload API文档

    ajaxFileUpload是一个异步上传文件的jQuery插件. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fil ...

随机推荐

  1. Object-C中的字符串对象1-不可变字符串

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  2. 大数据量下MySQL插入方法的性能比较

    不管是日常业务数据处理中,还是数据库的导入导出,都可能遇到需要处理大量数据的插入.插入的方式和数据库引擎都会对插入速度造成影响,这篇文章旨在从理论和实践上对各种方法进行分析和比较,方便以后应用中插入方 ...

  3. Atitit . 编程模型的变革总结

    Atitit . 编程模型的变革总结 1. 面向对象与面向过程程序设计有如下不同:  1 1.1. 函数与数据是否分离.... 1 1.2. 以功能为中心;以数据为中心..... 1 1.3. 事件驱 ...

  4. 异步FIFO的FPGA实现

    本文大部分内容来自Clifford E. Cummings的<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...

  5. navicat 手动设置索引unique,报错duplicate entry "" for key ""

    错误场景:仅限于手动设置unique时.在navicat中根据流程:右键表名 -> 设计表 -> 索引 -> 设置某列为unique -> 保存错误图示: 错误原因:这句错误提 ...

  6. java工程资源文件夹嵌套建立!

    做过一遍忘了,找了半天!记这里,看你还忘不忘!

  7. 05、Windows Store app 的图片裁切(更新)

    在 Win Phone Silverlight api 中,有一个 PhotoChooserTask 选择器,指定宽.高属性,在选择图片的时候, 可以进行裁切,代码: PhotoChooserTask ...

  8. swift基础知识

    let 声明常量var 声明变量 ?可以为空 !必须为所声明类型 swift中文教程:http://c.biancheng.net/cpp/swift/jiaocheng/

  9. js鼠标触发事件集合

    转载自:http://blog.sina.com.cn/s/blog_627002d101010yb7.html 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ...

  10. Extjs DateField Bug 当format为年月'Y-m',在当前月(30、31号)选择其他偶数月会乱跳的问题解决方案

    Ext.form.WMDateField = Ext.extend(Ext.form.DateField, { safeParse : function(value, format) { if (/[ ...