• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使用AjaxFileUpload.js实现异步文件上传示例
    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" />');
    您可能感兴趣的文章:
    • SpringMVC结合ajaxfileupload.js实现文件无刷新上传
    • 使用ajaxfileupload.js实现上传文件功能
    • jQuery插件ajaxfileupload.js实现上传文件
    • js ajaxfileupload.js上传报错的解决方法
    • JQuery插件ajaxfileupload.js异步上传文件实例
    • asp.net+ajaxfileupload.js 实现文件异步上传代码分享
    • ajaxFileUpload.js插件支持多文件上传的方法
    • 使用ajaxfileupload.js实现ajax上传文件php版
    • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
    • AjaxUpLoad.js实现文件上传功能
    上一篇:ContentType控制输出的类型是否区分大小写
    下一篇:Ajax传递中文参数到后台乱码的有效解决方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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