jQuery文件上传插件ajaxFileUpload ---谷营中西软件科技园

1.插件简介

wanzuwodou友情提示:
使用该插件的时候需要js版本和ajaxFileUpload插件的版本一致,直接从官网上下载相应的版本即可。下载步骤略。。。。
ajaxFileUpload是一个异步上传文件的jQuery插件。该插件使用非常简单。
语法:
:$.ajaxFileUpload([参数])
参数说明:

1、url            上传处理程序地址。  
2,fileElementId       需要上传的文件域的ID,即<input type="file">的ID。
3,secureuri        是否启用安全提交,默认为false4,dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success        提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6error          提交失败自动执行的处理函数。
7,data            自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type            当要提交自定义参数时,这个参数要设置成post

错误提示:

1,SyntaxError: missing ; before statement错误
  如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError: syntax error错误
  如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3,SyntaxError: invalid property id错误
  如果出现这个错误就需要检查文本域属性ID是否存在
4,SyntaxError: missing } in XML expression错误
  如果出现这个错误就需要检查文件name是否一致或不存在
5,其它自定义错误
  大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

使用方法:

 第1步:引入jQuery与ajaxFileUpload插件。注意先后顺序,先引入jQuery插件,在引入ajaxFileUpload插件。所有的jQuery插件都这样。
 

   <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

第2步:页面代码书写:

<body>
    <p><input type="file" id="file" name="file" /></p>
    <input type="button" value="上传图片" />
    <p><img id="img" alt="上传成功啦" src="" /></p>
</body>

第三步js代码:

<script src="jquery-1.7.2.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: '/fileUpload', //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: 'file', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { $("#img").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>

第4步:后台controller代码:

   @RequestMapping(value = "/fileUpload")
    public String fileUploads(@RequestParam MultipartFile[] files,
                             HttpServletRequest request, HttpServletResponse response) throws IOException {
        //可以在上传文件的同时接收其它参数
        Map<String, Object> map = Maps.newHashMap();
        try {
            map = com.leimingtech.core.common.FileUtils.fileUpload(files,
                    CommonConstants.FILE_BASEPATH, Constants.LOGO_UPLOAD_URL, request,"images",1);
        } catch (IOException e) {
            e.printStackTrace();
            log.error("上传文件失败", e.toString());
        }
        String json = JsonUtils.toJsonStr(map);
        response.setContentType("text/html");
        response.getWriter().write(json);

        return null;
    }

你可能感兴趣的:(jquery,文件上传,url,插件,wanzuwodou)