ajaxFileUpload插件

  • 关键词:

  $.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>
时间: 2024-08-07 00:48:47

ajaxFileUpload插件的相关文章

实用的ajaxfileupload插件

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的ID.3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scrip

让jQuery的ajaxFileUpload插件支持onchange事件

ajaxFileUpload插件只能上传一次的BUG发现还不少人遇到,很不幸我也遇到的,使用后发现里面的坑还不少,在createUploadForm方法中有句 var newElement = jQuery(oldElement).clone(); // 修改成clone(true),同时复制事件 另外abort这个方法也需要自己去实现. 需要支持AMD规范要增加如下代码: (function (factory) { 'use strict'; if (typeof define === 'fu

使用ajaxfileupload插件进行Ajax Post 异步提交多个文件

前台代码: <div> <div> <img src="images/pro_upload.png" onclick="javascript:document.getElementById('pic1').click();" /> <input type="file" hidden="hidden" id="pic1" name="pic1" /

使用ajaxfileupload插件实现异步上传并保存图片功能

使用jquery插件ajaxfileupload.js可以实现页面无刷新上传图片文件,后台管理有关图片的上传功能可以利用它,很方便 一.目标效果: 1.前端,页面上传多张图片时,POST到服务器端,页面能立即显示图片效果,并且不刷新页面 2.后台,页面POST过来的图片被重命名并保存到服务器 二.思路: 1.封装一个js函数uploadimg(imgid,fileid,hiddenid),里面调用ajaxfileupload.js的函数$.ajaxFileUpload()将标签input typ

ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例

HTML代码 和js 代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/js/jquery-1.8.3.min.js"></

jQuery插件之ajaxFileUpload

参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/article/50518.htm 使用方法: 第一步:先引入jQuery与ajaxFileUpload插件.注意先后顺序,这个不用说了,所有的插件都是这样. <script src="jquery-1.7.1.js" type="text/javascript"&

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

【转】jQuery插件之ajaxFileUpload

转自:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,fileElementId  需要上传的文件域的ID,即<input type="file">的

【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu