码迷,mamicode.com
首页 > Web开发 > 详细

ajaxFileUpload插件

时间:2016-08-03 15:17:26      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

  • 关键词:

  $.ajaxFileUpLoad();

  data

  status

  dataType

  • 参考资料:

  http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

  • 第一步:

  先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。 

    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>
  • 第二步:

  HTML代码:

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
  • 第三步:

  JS代码

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

 

ajaxFileUpload插件

标签:

原文地址:http://www.cnblogs.com/jacketlin/p/5715142.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!