第一步：先引入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. Oracle10g 安装步骤

    一.Oracle10g 安装预备步骤 取得 Oracle 10g 安装程序,或从 Oracle 技术网(OTN)下载光盘映像.在评估阶段您可以免费下载和使用无技术限制的全功能 Oracle,但在正式的 ...

  2. (Spring Boot框架)快速入门

    Spring Boot 系列文章推荐 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Boot 静态资源处理 今天介绍一 ...

  3. Unity3D 应用程序退出调用OnDestroy测试

    测试结果为关闭游戏,会调用OnDestroy().但OnApplicationQuit()比它提前调. using UnityEngine; using System.Collections; pub ...

  4. 每日英语：A Better Way To Treat Anxiety

    Getting up the nerve to order in a coffee shop used to be difficult for 16-year-old Georgiann Steely ...

  5. service文件(格林速洗项目）

    service文件模板:String url="http://59.78.93.208:9097/Order?id="+id+"&value="+val ...

  6. Eclipse中安装JBoss Tools插件

    1.先访问JBoss Tools网站,看看上面怎么说: http://tools.jboss.org -> 进入下载界面 看到下面这句话: Drag and drop this  icon in ...

  7. org.apache.hadoop.hbase.DoNotRetryIOException: Class org.apache.phoenix.coprocessor.MetaDataEndpointImpl cannot be loaded Set hbase.table.sanity.checks to false at conf or table descriptor if you want

    https://stackoverflow.com/questions/38495331/apache-phoenix-unable-to-connect-to-hbase 这个坑不该啊 首选配置hb ...

  8. treegrid-dnd.js

    (function($){ $.extend($.fn.treegrid.defaults, { onBeforeDrag: function(row){}, // return false to d ...

  9. 在Javascript弹出窗口中输入换行符

    private void showMessage(string strMsg) { Page.RegisterStartupScript("scriptStr", "&l ...

  10. [Java] java调用wsdl接口

    前提: ① 已经提供了一个wsdl接口 ② 该接口能正常调用 步骤1:使用cxf的wsdl2java工具生成本地类 下载CXF:http://cxf.apache.org/download.html ...