脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → AjaxFileUpload 异步上传

使用AjaxFileUpload.js实现异步文件上传示例

 更新时间：2014年05月29日 15:24:47   作者：  
AjaxFilleUpload.js可以使得我们不用去管理Iframe的一系列操作，也不用影响我们的页面结构，实现异步的文件提交
ajax是无法提交文件的，所以在上传图片并预览的时候，我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的，AjaxFilleUpload.js对上面的方法进行了一个包装，使得我们不用去管理Iframe的一系列操作，也不用影响我们的页面结构，实现异步的文件提交。

html:
复制代码 代码如下:

<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />

js:
复制代码 代码如下:

$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要链接到服务器地址
secureuri:false,
fileElementId:'file_upload', //文件选择框的id属性
dataType: 'text', //服务器返回的格式，可以是json、xml
success: function (data, status) //相当于java中try语句块的用法
{

$('#restoreDialog').html(data);




//alert(data);
},
error: function (data, status, e){ //相当于java中catch语句块的用法

$('#restoreDialog').html("上传失败，请重试");
}
});

这个方法还会出现一个问题，就是input只能使用一次的问题，input第二次的onchange将不会被执行，这应该是与浏览器的有关，解决办法就是替换这个input

像这样：
复制代码 代码如下:

$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
您可能感兴趣的文章:

相关文章

  • 如何使用ajax读取Json中的数据

    如何使用ajax读取Json中的数据

    这篇文章主要介绍了如何使用ajax读取Json中的数据，如何使用AJAX读取Json数组里面的数据，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Ajax详解及其案例分析

    Ajax详解及其案例分析

    本文主要给大家详细讲解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以参考下。
    2015-06-06
  • AJAX 请求区分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解

    AJAX 请求区分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解

    关于这个内容,很多人都有所了解.但从我搜索的内容来看,他们只是略微看一下,根本不知道里面到底是什么情况.
    2011-06-06
  • ajax获得json对象数组 循环输出数据的方法

    ajax获得json对象数组 循环输出数据的方法

    今天小编就为大家分享一篇ajax获得json对象数组 循环输出数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 原生Ajax之全面了解xhr的概念与使用

    原生Ajax之全面了解xhr的概念与使用

    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,下面这篇文章主要给大家介绍了关于原生Ajax之全面了解xhr的概念与使用的相关资料,需要的朋友可以参考下
    2022-11-11
  • ajax struts2 下拉框赋值(适合所有)

    ajax struts2 下拉框赋值(适合所有)

    此代码适合所有下拉列表取值;一个项目所有的下拉列表只需要这一个公用方法，接下来为大家详细介绍下具体实现步骤，感兴趣的朋友可以参考下，希望可以帮助到你
    2013-03-03
  • AJAX实现图片预览与上传及生成缩略图的方法

    AJAX实现图片预览与上传及生成缩略图的方法

    下面小编就为大家带来一篇AJAX实现图片预览与上传及生成缩略图的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Ajax校验是否重复的实现代码

    Ajax校验是否重复的实现代码

    这篇文章主要介绍了Ajax校验是否重复的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • Ajax获取数据然后显示在页面的实现方法

    Ajax获取数据然后显示在页面的实现方法

    下面小编就为大家带来一篇Ajax获取数据然后显示在页面的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 反向Ajax 30分钟快速掌握

    反向Ajax 30分钟快速掌握

    这篇文章主要介绍了反向Ajax 30分钟快速掌握的相关资料,需要的朋友可以参考下
    2016-07-07

最新评论