javascript ajax上传图片

来源：互联网发布：足球关注分析软件编辑：程序博客网时间：2024/05/01 10:10

昨天试了下使用ajax去上传图片，试了下，还真的可以，也不难，就记下来，免得今后又忘记了

直接上代码：

先上布局代码：

<div id="picture">

   <input type="file" id="pictureupload" />
   <button id="upload" onclick="v()">上传图片</button>
</div>

接下来是js语言，也是比较简单，就直接上了：

function v(){

var file=document.getElementById("pictureupload").files[0];

var place="http://localhost/fcsapp77/picture.do";
//1、准备FormData

var fd = new FormData();

fd.append("commonsMultipartFile",document.getElementById("pictureupload").files[0]);

//2。创建xhr对象

var xhr = new XMLHttpRequest();

//3.发起ajax请求传送数据

xhr.open("POST",place);

xhr.send(fd);

}

大家都看得出，这回需要用到formatdata去“封装”数据

下面是服务端的代码：

public class Pictureupload {@ResponseBody@RequestMapping("/picture.do")public String add(@RequestParam("commonsMultipartFile") CommonsMultipartFile commonsMultipartFile,HttpServletRequest request, HttpServletResponse response) throws IOException {String path = request.getRealPath("/fileupload");InputStream inputStream = commonsMultipartFile.getInputStream();File file = new File(path, commonsMultipartFile.getOriginalFilename());OutputStream outputStream = new FileOutputStream(file);int len = 0;byte[] buffer = new byte[400];while ((len = inputStream.read(buffer)) != -1) {outputStream.write(buffer, 0, len);}outputStream.close();inputStream.close();//return new PackJson().getone(file.getAbsolutePath()).toString();return file.getAbsolutePath();}}

就是这样，简单，还需要配置文件：
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"></property><property name="maxUploadSize" value="10485760000"></property><property name="maxInMemorySize" value="40960"></property></bean><bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"><property name="supportedMediaTypes"><list><value>text/html;charset=UTF-8</value></list></property></bean><bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"><property name="messageConverters"><list><ref bean="stringHttpMessageConverter"></ref></list></property></bean><bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter"><property name="supportedMediaTypes"><list><value>text/html;charset=UTF-8</value></list></property></bean><bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"><property name="messageConverters"><list><ref bean="stringHttpMessageConverter"><ref bean="mappingJacksonHttpMessageConverter"></ref></ref></list></property></bean>

就是这么多了，本来我打算设置文件保存在d盘。但是在前端用img标签读取的时候不会，所以就不用了

1 0