`
webook_java
  • 浏览: 58996 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

JQuery无刷新上传之ajaxFileUpload

 
阅读更多
一、ajaxFileUpload是一个异步上传文件的jQuery插件。   
  
   
  
  语法:$.ajaxFileUpload([options])   
  
  options参数说明:   
  
1、url            上传处理程序地址。     
2、fileElementId       需要上传的文件域的ID,即<input type="file">的ID。   
3、secureuri        是否启用安全提交,默认为false。    
4、dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。   
5,success        提交成功后自动执行的处理函数,参数data就是服务器返回的数据。   
6,error          提交失败自动执行的处理函数。   
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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。  


<html>  
<head>  
    <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 () {   
                if ($("#file1").val().length > 0) {   
                   ajaxFileUpload();   
                }   
                else {   
                   alert("请选择图片");   
               }   
            })   
        })   
        function ajaxFileUpload() {   
            $.ajaxFileUpload   
            (   
                {   
                    url: '/Home/Upload', //用于文件上传的服务器端请求地址   
                    type: 'post',   
                    data: { Id: '123', name: 'lunis' }, //此参数非常严谨,写错一个引号都不行   
                   secureuri: false, //一般设置为false   
                   fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />  
                   dataType: 'json', //返回值类型 一般设置为json   
                    success: function (data, status)  //服务器成功响应处理函数   
                   {   
                        alert(data);   
                        $("#img1").attr("src", data.imgPath1);   
                        alert("你请求的Id是" + data.Id + "     " + "你请求的名字是:" + data.name);   
                        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>  
</head>  
<body>  
    <input type="file" id="file1" name="file" />  
 
    <input type="button" value="上传" />  
    <img id="img1" alt="上传成功啦" src="" />  
  
</body>  
</html>  

分享到:
评论

相关推荐

    jquery无刷新上传 .net版

    **jQuery无刷新上传 .NET版** 是一个基于jQuery的文件上传解决方案,专为.NET平台设计。这个技术利用了Ajax技术实现页面无刷新的文件上传,提供了更好的用户体验,避免了传统文件上传导致的整个页面刷新,使得用户...

    使用jquery的上传插件:ajaxfileupload.js实现excel文件上传

    `ajaxfileupload.js`是一个基于jQuery的轻量级插件,它允许用户通过Ajax方式实现文件的异步上传,无需刷新页面。这种技术极大地提升了用户体验,因为用户可以在提交文件的同时继续浏览网页的其他部分。 首先,确保...

    ajaxFileUpload 无刷新无Form上传

    无刷新上传功能是提升用户交互体验的一种关键技术,它使得用户在上传文件时无需等待页面刷新,提高了网页应用的响应速度和效率。Ajax技术,尤其是配合ajaxFileUpload插件,是实现这一功能的常用方法。 Ajax...

    ajaxfileupload以及jquery的js

    AjaxFileUpload通过Ajax实现无刷新上传,而jQuery则简化了前端开发,两者结合能极大地提升项目效率和用户体验。同时,JSON2.js保证了跨浏览器的JSON解析兼容性,确保数据交换的顺利进行。在实际项目中,这些库的合理...

    jquery-1.2.1.js和ajaxfileupload.js

    总的来说,"jquery-1.2.1.js"和"ajaxfileupload.js"是Web开发中的关键工具,它们共同帮助开发者实现了高效的页面交互和无刷新的文件上传功能。虽然jQuery现在已经更新到了更高的版本,但早期版本如1.2.1仍然在许多旧...

    C# jquery ajax 预览并无刷新上传图片

    "C# jQuery AJAX 预览并无刷新上传图片"的主题涵盖了多项技术,旨在提供流畅、直观的用户体验。以下是对这些知识点的详细阐述: 1. **jQuery**:jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、...

    struts2下利用jquery、ajaxfileupload实现无刷新上传文件

    在"struts2下利用jquery、ajaxfileupload实现无刷新上传文件"这个主题中,我们将探讨如何将这三者结合,创建一个高效的文件上传系统。 首先,要实现无刷新上传,我们需要在客户端使用jQuery和AJAXFileUpload插件。...

    ajaxfileupload.js完整使用全套(带对应jquery+demo)

    `ajaxfileupload.js`是一个JavaScript库,用于实现异步文件上传功能,避免了传统文件上传时页面刷新的问题。它与jQuery的结合使得文件上传更加简便、高效。 首先,我们来理解`ajaxfileupload.js`的核心概念。这个...

    ajax上传图片之ajaxfileupload

    在IT行业中,Ajax上传图片是一种常见的前端技术,用于在不刷新整个页面的情况下实现文件的上传。AjaxFileUpload是实现这一功能的一个JavaScript库,它利用Ajax技术与后台进行异步通信,提高了用户体验。在这个场景中...

    ajaxfileupload and jquery 1.7.2

    AjaxFileUpload是jQuery的一个插件,它允许用户在不刷新整个页面的情况下上传文件,提供了丰富的功能和良好的用户体验。在这个场景中,我们看到与jQuery 1.7.2版本一起使用的AjaxFileUpload,表明这是一个较旧但经过...

    使用ajaxFileUpload插件实现图片无刷新上传

    为了解决这个问题,出现了许多无刷新上传技术,其中AjaxFileUpload插件就是一个常用的选择。这个插件允许用户在不刷新页面的情况下实现文件上传,提升了用户体验。 AjaxFileUpload是基于JavaScript的jQuery插件,它...

    AjaxFileUpload

    AjaxFileUpload是一个基于JavaScript和PHP的插件,它允许用户通过Ajax技术实现文件的无刷新上传。这个技术在现代Web应用中非常常见,因为它提供了更好的用户体验,用户可以在不离开当前页面的情况下上传文件,大大...

    jquery.ajaxFileUpload

    为了解决这一问题,jQuery提供了许多插件,如AjaxFileUpload,它允许开发者实现异步(Ajax)文件上传,提高用户体验,无需刷新整个页面即可完成文件提交。 ### 1. AjaxFileUpload 插件简介 AjaxFileUpload是jQuery...

    ASP.NET使用jquery插件无刷新上传文件

    总的来说,ASP.NET结合jQuery的`ajaxfileupload.js`插件实现了前端无刷新文件上传,它利用`iframe`和`form`避免了页面刷新,通过`jQuery.ajax`接口与服务器进行异步通信。在ASP.NET后端,我们需要设置合适的处理程序...

    ajaxfileupload.js 异步上传jquery插件

    **AjaxFileUpload.js** 是一个基于 jQuery 的异步文件上传插件,它允许用户在不刷新页面的情况下上传文件,提供了一种便捷、高效的文件交互体验。这个插件广泛应用于网页应用,尤其是那些需要用户交互频繁上传文件的...

    jquery+ajaxfileupload+html文件上传

    本教程将深入探讨如何使用jQuery、AjaxFileUpload插件以及HTML来实现一个无刷新的文件上传系统。 ### jQuery简介 jQuery是一个高效、简洁且易用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。...

    ajaxfileupload.js结合input[type=file]无刷新上传

    在现代Web开发中,无刷新上传文件已经成为一种常见的需求,它可以提供更好的用户体验,避免页面在整个文件上传过程中重新加载。本文将详细介绍如何使用`ajaxfileupload.js`这个jQuery插件,结合`input[type=file]`...

    thinkphp +jquery +Jcrop+ajaxfileupload上传图片并裁剪保存到数据库

    本教程将详细介绍如何使用ThinkPHP框架、jQuery库、Jcrop图像裁剪工具以及AjaxFileUpload插件实现一个无刷新的图片上传和裁剪功能,最后将裁剪后的图片保存到数据库。 首先,`ThinkPHP`是一个流行的PHP框架,它提供...

    jQuery异步上传文件插件ajaxFileUpload详细介绍

    jQuery的ajaxFileUpload插件是一种实现异步文件上传功能的工具,它允许用户在不刷新页面的情况下上传文件,提供了一种高效且用户友好的交互体验。以下是对该插件的详细说明: 首先,使用ajaxFileUpload插件的基本...

    js+php无刷新上传

    5. **无刷新上传流程**: 用户选择文件后,前端使用jQuery的ajaxfileupload插件发起AJAX请求,将文件数据发送到后台PHP脚本;PHP脚本接收文件并处理,如果一切正常,会返回一个确认消息;前端接收到消息后更新页面...

Global site tag (gtag.js) - Google Analytics