第一步:先引入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. 源码分析HotSpot GC过程(二):DefNewGeneration的GC过程

    由于虚拟机的分代实现,虚拟机不会考虑各个内存代如何实现垃圾回收,具体的工作(对象内存的分配也是一样)由各内存代根据垃圾回收策略自行实现. DefNewGeneration的使用复制算法进行回收.复制算 ...

  2. 【C语言】C语言程序所占内存分类

    参考"http://blog.sina.com.cn/s/blog_63d4849c01014qg3.html" C语言内存分为5部分:堆.栈.全局(静态)区.常量区(只读)和代码 ...

  3. iOS 开发如何入门

    iOS 开发如何入门 新人如何入门 上一篇文章的回复中,很多读者让我推荐入门图书.其实我觉得每个人可能有自己喜欢的学习方式,我习惯的不一定适合你.不过我可以分享一下我当时是如何学习 iOS 开发的. ...

  4. (2)FluidMoveBehavior 之单击 Grid 中 Tile 进行排序

    在上一篇文章中,使用 FluidMoveBehavior 结合 FluidMoveSetTagBehavior 可以使数据从 ListBox 中的 数据显示时,产生缓慢的动画,从而更加生动.其实 Fl ...

  5. linux命令之fuser

    Usage: fuser [ -a | -s | -c ] [ -n SPACE ] [ -SIGNAL ] [ -kimuv ] NAME... [ - ] [ -n SPACE ] [ -SIGN ...

  6. SNP密度分布模式

    1. window=100k,step=2k 统计每个window的snp密度,然后用mixtools的normalmixEM(两个组分的混合模型)统计snp的分布模式. R command: lib ...

  7. [pwm]PWM的输入捕捉模式

    对于stm32来说,输入捕捉模式有两种: 普通输入捕捉模式:经常用来测量脉冲宽度和频率,例如测量脉冲宽度,TIM5_CH1来捕获高电平脉宽,首先先设置输入捕获为上升沿触发,然后记录下发生上升沿时TIM ...

  8. HashMap原理<转>

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  9. linux 链接的使用 创建和删除符号连接(软、硬链接)

    1 . 使用方式 :ln [option] source_file dist_file   (source_file是待建立链接文件的文件,dist_file是新创建的链接文件)            ...

  10. asp.net 列表样式

    找了好一段时间,找到一个不错的文章列表样式,留起来备用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...