$('xx')[0].files[0]是什么意思,Ajax上传文件至springMVC的controller

①首先得明白jQuery对象只能使用jQuery对象的属性和方法,JavaScript对象只能使用JavaScript对象的属性和方法;
②files[0]是JavaScript的属性;
③$('xx')是jQuery对象,$('xx')[0]是将jQuery对象:$('xx')转换为JavaScript对象,这样才可以使用JavaScript对象的属性和方法;
④我们再看这行代码的背景,HTML5支持multiple属性,即<input type="file">可能会添加multiple属性并赋值:multiple="multiple",即<input type="file" multiple="multiple">,这样一次性可同时上传多张图片,所以获得一张图片的方法就是:$('xx')[0].files[0]
⑤扩展:
$('xx')[0].files[0].size可获得文件的大小,单位是字节(B),使用$('xx')[0].files[0].size可用于判断文件的大小。

最后:第②点可能描述不准,若发现错误欢迎指正,大家共同进步。


这里myfiles,要跟后台接收参数名称相等



  • 16
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在SSM框架中使用Ajax实现图片上传到服务器、显示以及选择图片之后在前端显示的功能,可以按照以下步骤进行操作: 1. 在前端页面中添加一个上传图片的input标签,并使用Ajax将图片上传到后台Controller中。 2. 在Controller中使用SpringMVC的文件上传功能,将图片保存到服务器指定的路径中。 3. 在Controller中返回图片的访问路径,然后使用Ajax在前端页面中显示图片。 4. 如果需要实现选择图片之后在前端页面中显示,可以使用jQuery的Ajax和HTML5的File API来实现。首先,在前端页面中添加一个显示图片的img标签,然后通过jQuery选择文件,使用Ajax将文件上传到后台Controller中。在Controller中使用SpringMVC的文件上传功能,将图片保存到服务器指定的路径中。最后,在Controller中返回图片的访问路径,并使用File API在前端页面中显示图片。 具体实现细节参考以下代码: 前端页面: ```html <input type="file" id="fileUpload" name="fileUpload"/> <img id="preview" src="" style="display:none;"/> <script> $(function() { // 选择图片后显示预览图 $("#fileUpload").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { $("#preview").attr("src", e.target.result); $("#preview").show(); } reader.readAsDataURL(file); // 使用Ajax上传图片 var formData = new FormData(); formData.append("file", file); $.ajax({ url: "uploadImage", type: "POST", data: formData, contentType: false, processData: false, success: function(data) { // 显示上传的图片 $("#preview").attr("src", data); } }); }); }); </script> ``` 后台Controller: ```java @Controller public class ImageController { @RequestMapping(value="/uploadImage", method=RequestMethod.POST) @ResponseBody public String uploadImage(@RequestParam("file") MultipartFile file) { String fileName = UUID.randomUUID().toString() + ".jpg"; String filePath = "upload/" + fileName; try { // 保存图片到服务器 file.transferTo(new File(filePath)); // 返回图片的访问路径 return filePath; } catch (Exception e) { e.printStackTrace(); return ""; } } } ``` 注意事项: 1. 在Controller中需要添加`@ResponseBody`注解,将返回值转换成JSON格式。 2. 在前端页面中需要添加jQuery和File API的引用。 3. 在服务器中需要设置文件上传的临时目录和上传文件的大小限制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值