Ajax方式上传文件,并接收返回结果

一、准备

1、页面引入jQuery文件

2、页面引入jQuery的表单插件jQuery.form.js(js文件需要下载,http引用不得行,原因参照https://stackoverflow.com/questions/35261239/ajaxform-is-not-a-function)

二、应用

表单(关键在于form里面enctype属性必须为multipart/form-data, input的type属性要为file)

<form id="importForm" class="ibm-row-form" method="post" enctype="multipart/form-data">
    <label for="myInputField1">Import Pricing(.xls):</label>
    <input id="myInputField1" type="file" name="file" data-widget="fileinput" data-multiple="false" />
    <br>	
    <button type="button" class="ibm-btn-pri" onclick="submitForm()">Submit</button>
</form>

 js代码

function submitForm(){
    $('#importForm').ajaxSubmit({
        url:"importExcel",
        type:"POST",
        dataType:"json",
        success: function(data){
            alert(data.message);
        }
    });	
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个基于 SSM(Spring+SpringMVC+MyBatis)框架,使用 JSP 和 AJAX 实现文件的案例。 1. 在 SpringMVC 配置文件中添加文件解析器: ```xml <!-- 配置文件解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760"/> <!-- 限制上文件的大小为10MB --> </bean> ``` 2. 在 JSP 页面中添加表单和 AJAX 代码: ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="text" name="name"/> <button id="uploadBtn" type="button">上</button> </form> <script> $(function() { $('#uploadBtn').click(function() { var formData = new FormData($('#uploadForm')[0]); $.ajax({ url: 'upload', type: 'POST', data: formData, processData: false, contentType: false, xhr: function() { // 监听上进度 var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { var percent = Math.round((event.loaded / event.total) * 100); console.log('上进度:' + percent + '%'); } }, false); } return xhr; }, success: function(result) { console.log('上成功'); }, error: function() { console.log('上失败'); } }); }); }); </script> ``` 3. 在 SpringMVC 控制器中添加文件处理方法: ```java @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody public String upload(@RequestParam("file") MultipartFile file, @RequestParam("name") String name) { try { if (!file.isEmpty()) { String fileName = file.getOriginalFilename(); String filePath = "/data/" + fileName; // 上文件保存路径 File dest = new File(filePath); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } file.transferTo(dest); // TODO: 处理上文件和其他参数 return "success"; } } catch (Exception e) { e.printStackTrace(); } return "error"; } ``` 其中,`@RequestParam("file")` 注解表示接收名为 `file` 的文件参数,`@RequestParam("name")` 注解表示接收名为 `name` 的其他表单参数。 以上就是一个简单的基于 SSM、JSP 和 AJAX文件案例。注意,为了方便起见,这里使用了 jQuery 库来简化 AJAX 代码的编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值