js 获取input type=file 文件，并且上传

html页面：

<input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">

js文件：

 $(".inputPic").change(function() {var serviceUrl = getProjectURL();var userguid = $("#userguid").val();var url = serviceUrl + "/myinformation/uploadheadimg";var form = new FormData();var file=$(".inputPic")[0].files;form.append("myfile", new Blob(file));form.append("userguid", userguid);var xhr = new XMLHttpRequest(); xhr.open("post", url, true); // poxhr.upload.onloadstart = function() {// 上传开始执行方法ot = new Date().getTime(); // 设置上传开始时间oloaded = 0;// 设置上传开始时，以上传的文件大小为0};xhr.send(form); // 开始上传，发送form数据xhr.responseText = function(res) {console.log(res);}xhr.onreadystatechange = function(response) {console.log(response);if (response.target.readyState == '4') {var result = JSON.parse(response.target.response);if (Number(result.data) == 0) {alert(result.msg);} else {alert("封面上传成功");$("#cropperModel").modal('hide');}}}});

java后台：

 @ResponseBody@RequestMapping("/uploadheadimg")public JSONObject uploadheadimg(HttpServletRequest request, HttpSession session) {try {System.out.println("开始上传头像......");String newFileName = null;String userguid = request.getParameter("userguid");System.out.println(userguid);UserInfo userinfo=userService.getUserByGuid(userguid);SysConfig config = configService.getByName("isuptoaliyun");if (ServletFileUpload.isMultipartContent(request)) {if ("0".equals(config.getConfigvalue())) {MultipartHttpServletRequest fileUpload = (MultipartHttpServletRequest) request;MultipartFile multifile = fileUpload.getFile("myfile");String filetype = multifile.getContentType();String realPath = PropertiesUtil.getValue("FILEPATH", "fileconfig.properties");if (filetype.contains("png")) {newFileName = sdf.format(new Date()) + "_"+ userguid.substring(userguid.length() - 6, userguid.length()) + ".png";} else if (filetype.contains("jpg")) {newFileName = sdf.format(new Date()) + "_"+ userguid.substring(userguid.length() - 6, userguid.length()) + ".jpg";}File targetFile = new File(realPath, newFileName);multifile.transferTo(targetFile);FileInfo fileinfo = new FileInfo();fileinfo.setAddtime(new Date());fileinfo.setFilepath(targetFile.getAbsolutePath().replace("\\", "&&"));String ipconfig = PropertiesUtil.getValue("IPCONFIG", "fileconfig.properties");fileinfo.setFileurl("http://" + ipconfig + "/upload/" + newFileName);fileinfo.setFilesize(request.getContentLength());fileinfo.setRowguid(UUID.randomUUID().toString());fileinfo.setCliengguid(UUID.randomUUID().toString());fileService.addFileInfo(fileinfo);userinfo.setLogoguid(fileinfo.getCliengguid());userinfo.setLogopicurl(fileinfo.getFileurl());userService.updateUser(userinfo);} else {String endpoint = ConfigUtil.getProperty("endpoint");String accessKeyId = ConfigUtil.getProperty("accessKeyId");String accessKeySecret = ConfigUtil.getProperty("accessKeySecret");String bucketName = ConfigUtil.getProperty("bucketName");String firstKey = "headimg/"+UUID.randomUUID().toString();OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);try {MultipartHttpServletRequest fileUpload = (MultipartHttpServletRequest) request;MultipartFile multifile = fileUpload.getFile("myfile");if (ossClient.doesBucketExist(bucketName)) {} else {ossClient.createBucket(bucketName);}InputStream is1 = new ByteArrayInputStream(multifile.getBytes());PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName,firstKey,is1);ObjectMetadata metadata = new ObjectMetadata();metadata.setObjectAcl(CannedAccessControlList.PublicRead);putObjectRequest.setMetadata(metadata);ossClient.putObject(putObjectRequest);OSSObject ob = ossClient.getObject(bucketName,firstKey);String url = ob.getResponse().getUri();FileInfo fileinfo = new FileInfo();fileinfo.setRowguid(UUID.randomUUID().toString());fileinfo.setFilesize(request.getContentLength());fileinfo.setAddtime(new Date());fileinfo.setFilepath(firstKey);fileinfo.setFileurl(url);fileinfo.setIstoali("1");fileinfo.setCliengguid(UUID.randomUUID().toString());fileService.addFileInfo(fileinfo);userinfo.setLogoguid(fileinfo.getCliengguid());userinfo.setLogopicurl(fileinfo.getFileurl());userService.updateUser(userinfo);} catch (OSSException oe) {oe.printStackTrace();} catch (ClientException ce) {ce.printStackTrace();} catch (Exception e) {e.printStackTrace();} finally {ossClient.shutdown();}}}return BuildJsonOfObject.getSuccessJSONString(MSG.SUCCESSCODE,MSG.SystemSuccess);} catch (Exception e) {e.printStackTrace();return BuildJsonOfObject.getErrorJSONString(MSG.SUCCESSCODE,e.getMessage());}}

希望对你有所帮助

js 获取input type=file 文件，并且上传相关推荐

＜input type=“file“＞实现上传文件
嗨害嗨,我又来了奥.今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件.首先,我们写好html,如下. <form id="f ...
input type=file accept=.zip上传文件响应慢的问题解决办法
在谷歌和火狐中使用 accept=".zip" 属性发现响应延迟的问题. 于是几经尝试后,发现是 accept=".zip" 属性的问题,删掉它或者将 * 通配 ...
php多图片上传到数组,input type=file多图片上传原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的代码如下: 这里要给file表单加上一个multiple属性 multiple="multiple& ...
html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
监听input type=file 文件上传取消事件
在做项目的时候,需要根据是否上传图片,(前提是已经上传文件,再次上传取消时,监听取消事件)进而判断页面变化.通过查阅相关资料,发现chane事件并不能监听取消,于是从另外一种角度:判断上传的文件是否有 ...
Android webview Input type=file 文件上传解决方法
默认的情况下在HTML中写 <input type=file /> 的时候回弹出选择文件的窗口,但实际上在webview中默认的是不弹出窗口的解决方法在WebChromeClient ...
input type属性为file时（type=file），上传一次然后做更新input的change事件
最近在做文件上传,第一次上传之后,再次上传同样的文件,不会做出相应的事件处理: 解决方案: 当你把input的文件取出之后,使用replaceWith覆盖掉以前的input,这样就做到了刷新input ...
html读取input type=file文件内容
<input id="uploadInput" type="file" class="file_input" name="m ...
js获取摄像头中的视频流并上传到后台
今天研究了下js获取摄像头中的视频流,全网搜索相关的文章,终于上天不负有心人.以下是原文代码: index.html: <!DOCTYPE html> <html><he ...

js 获取input type=file 文件，并且上传

js 获取input type=file 文件，并且上传相关推荐

最新文章

热门文章