ajax实现文件异步上传并回显文件相关信息功能示例

 更新时间:2018年06月25日 15:09:28   作者:一个小小小码农  
这篇文章主要介绍了ajax实现文件异步上传并回显文件相关信息功能,结合实例形式分析了基于jQuery $.ajax方法的文件异步上传以及后台java程序对文件信息的读取与显示相关操作技巧,需要的朋友可以参考下

本文实例讲述了ajax实现文件异步上传并回显文件相关信息功能。分享给大家供大家参考,具体如下:

上传文件的信息

<div class="form-group">
  <div class="col-sm-4">
  <label class="control-label">应用文件</label>
</div>
<div class="col-sm-8">
  <input type="file" name="appFile" id="appFile">
  <input type="submit" value="确认上传" id="subm">
</div>

ajax提交

$("#subm").click(function(){
    var formData = new FormData();
    formData.append("appFile", document.getElementById("appFile").files[0]);
    alert("8888888888888888888888888");
    $.ajax({
      url: '${ctx}/appresources/fileUpload.shtml',
      type: "POST",
      data: formData,
      dataType: "json",
      contentType: false,
      processData: false,
      success: function (data) {
        alert("上传成功");
        $("#versionCode").val(data.versionCode);
        $("#appVersion").val(data.appVersion);
        $("#appPackageName").val(data.appPackageName);
      },
      error: function () {
        alert("上传失败!");
      }
    });
});

后台处理:

@ResponseBody
@RequestMapping("fileUpload")
public JSONObject fileUpload(MultipartFile appFile,Model model,HttpServletRequest request,HttpServletResponse response) {
    ServletContext
//........................省略
    String infos=ApkUtil.getApkInfo(needPath+"source"+File.separator+"apk"+File.separator+fileName);
    String[] info=infos.split(",");
    String versionCode=info[0];//版本号
    String versionName=info[1];//版本名
    String packageName=info[2];//包名
    String appName=fileName;
    AppResourcesFormMap appResourcesFormMap = getFormMap(AppResourcesFormMap.class);
    appResourcesFormMap.put("appName",fileName);
    appResourcesFormMap.put("appVersion",versionName);
    appResourcesFormMap.put("appPackageName",packageName);
    appResourcesFormMap.put("versionCode", versionCode);
    System.out.println(appResourcesFormMap);
    //model.addAttribute("appresources", appResourcesFormMap);
    JSONObject fromObject = JSONObject.fromObject(appResourcesFormMap);
    //String string = fromObject.toString();
    return fromObject;
}

更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题

希望本文所述对大家ajax程序设计有所帮助。

相关文章

  • Ajax中通过JS代码自动获取表单元素值的示例代码

    Ajax中通过JS代码自动获取表单元素值的示例代码

    如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢
    2014-09-09
  • ajax、axios和fetch之间优缺点重点对比总结

    ajax、axios和fetch之间优缺点重点对比总结

    今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下
    2022-12-12
  • Ajax异步加载解析

    Ajax异步加载解析

    这篇文章主要为大家详细介绍了Ajax 异步加载,什么是Ajax 异步加载,如何实现Ajax 异步加载,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • ajax上传多图到php服务器的方法

    ajax上传多图到php服务器的方法

    这篇文章主要为大家详细介绍了ajax上传多图到php服务器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Ajax+php实现商品分类三级联动

    Ajax+php实现商品分类三级联动

    这篇文章主要介绍了Ajax+php实现商品分类三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Ajax 程序开发中常见问题

    Ajax 程序开发中常见问题

    Ajax 程序开发中常见问题,利用大家快点的找到问题所在,快速解决问题。
    2009-08-08
  • ajax使用formdata上传文件流

    ajax使用formdata上传文件流

    这篇文章主要为大家详细介绍了ajax使用formdata上传文件流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • ajax跨页面提交表单

    ajax跨页面提交表单

    这篇文章主要为大家详细介绍了ajax跨页面提交表单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Ajax异步传输与PHP实现交互示例

    Ajax异步传输与PHP实现交互示例

    Ajax异步传输想必大家并不陌生吧,下面为大家介绍下与PHP实现交互的示例,大家不要错过
    2014-01-01
  • Ajax使用异步对象发送请求方案详解

    Ajax使用异步对象发送请求方案详解

    Ajax的原理是通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面,这篇文章主要介绍了Ajax使用异步对象发送请求简介,需要的朋友可以参考下
    2024-04-04

最新评论