ajax上传img files,ajax,MultipartFile图片上传

你的名字 2022-09-03 11:16 211阅读 0赞

1.html 结构

uploadimg

2.js

$("\#uploadimg").on("click", function () \{

var file = $('\#file')\[0\].files\[0\];

var formData = new FormData();

formData.append("file\_data", file);

formData.append("type", "1");

$.ajax(\{

url: url,//请求路径

type: 'POST',

cache: false,

data: formData,

processData: false,

contentType: false,

success: function (data) \{

\},

error: function (err) \{

\}

\});

\});

3.controller

@RequestMapping(value = "/fileUpload",method = RequestMethod.POST)

public JSONObject fileUpload(@RequestParam("file\_data") MultipartFile file\_data, @RequestParam("type") String type,

HttpServletRequest request)\{

JSONObject result = new JSONObject();

Path tempPath =Paths.get(Commonconstants.FILE\_TEMP\_PATH);

tempPath = tempPath.resolve(type);

Path realPath = Paths.get(rootPath,tempPath.toString());

if (!Files.exists(realPath))\{

try \{

Files.createDirectories(realPath);

\} catch (IOException e) \{

result.put(Commonconstants.CODE,1);

result.put(Commonconstants.MESSAGE,e.getLocalizedMessage());

e.printStackTrace();

return result;

\}

\}

String fileName = UUID.randomUUID().toString().replace("-","")+".jpg";

tempPath = tempPath.resolve(fileName);

realPath = realPath.resolve(fileName);

try \{

file\_data.transferTo(realPath.toFile());

\} catch (IOException e) \{

result.put(Commonconstants.CODE,1);

result.put(Commonconstants.MESSAGE,e.getLocalizedMessage());

e.printStackTrace();

return result;

\}

result.put(Commonconstants.CODE,0);

result.put("url",tempPath.toString());

return result;

\}

参考的原文：https://blog.csdn.net/q394503873/article/details/80737323

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 apiclod 上传图片_apiCloud上传图片

Hello APP height:100%; \} \wrap\{ height:100%; display:-webkit-box; display:-webki

野性酷女/ 2022年10月31日 00:57/ 0 赞/ 254 阅读

相关 ajax上传img files,ajax,MultipartFile图片上传

1.html 结构 uploadimg 2.js $("\uploadimg").on("click", function () \{ var file = $('\f

你的名字/ 2022年09月03日 11:16/ 0 赞/ 212 阅读

相关 c ajax 上传图片插件,ajax实现图片上传和预览

图片上传功能 html结构： !\[\](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能，在其属性中也包含一

喜欢ヅ旅行/ 2022年09月03日 07:21/ 0 赞/ 228 阅读

相关 $.ajax动态上传图片,基于ajax实现上传图片代码示例解析

js源码： /// /// /\! \ jQuery upload \ 用于上传单个文件，上传成功后,返回文件路径。 \ 本插件依赖jQuery，jquery.fo

素颜马尾好姑娘i/ 2022年09月03日 06:22/ 0 赞/ 148 阅读

相关 ajax上传图片

index.html <!DOCTYPE html> <html> <head> <title>Ajax 上传文件</title>

向右看齐/ 2022年06月05日 08:17/ 0 赞/ 182 阅读

相关图片上传

上篇博客已经介绍了文件的上传，这次就简单总结一下图片的上传，以及上传图片的显示。利用三个控件：Input（File）、Button控件、Image控件，页面简单设计如下图：

川长思鸟来/ 2022年06月03日 08:26/ 0 赞/ 231 阅读

相关 jquery的ajax上传图片并且显示上传进度

jquery上传文件用的formdata，上传进度条需要添加xhr的onprogress html代码如下： <!DOCTYPE html> <html l

小咪咪/ 2022年05月08日 12:10/ 0 赞/ 188 阅读

相关图片上传

文件上传流程： 1、定义 <input type="file" name="file" accept="image/\" onchange="uploadimage(th

ゝ一世哀愁。/ 2022年04月02日 11:46/ 0 赞/ 330 阅读

相关上传图片

<img src="~/Content/img/btn\_1.png" class="img-responsive" id="a\_pic"> <input class="

￡神魔★判官ぃ/ 2021年09月30日 09:54/ 0 赞/ 582 阅读

相关上传图片

// 允许上传的图片后缀 $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = expl

蔚落/ 2021年09月18日 22:22/ 0 赞/ 518 阅读