<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
这里没有<form>
标签,也没有enctype="multipart/form-data"
属性。
javascript代码
var formData = new FormData();
formData.append(@H_301_57@'myfile',$(@H_301_57@'#file')[0].files[0]);
$.ajax({
url: @H_301_57@'请求路径/uploadPic',type: @H_301_57@'POST',cache: false,data: formData,processData: false,contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里有几处不一样:
append()
的第二个参数应是文件对象,即$('#file')[0].files[0]
。contentType
也要设置为‘false’。
从代码$('#file')[0].files[0]
中可以看到一个<input type="file">
标签能够上传多个文件,
只需要在<input type="file">
里添加multiple
或multiple="multiple"
属性。
java代码
@RequestMapping(value = "/uploadPic",produces = "application/json") @ResponseBody public Object importPicFile(String picParams,MultipartFile myfile,HttpServletRequest request,HttpServletResponse response) throws IOException { Map<String,Object> resultMap = new HashMap<String,Object>(); Map<String,Object> map = new HashMap<String,Object>(); if (myfile.isEmpty()) { map.put("result","error"); map.put("msg","上传文件不能为空"); return String. valueOf(JSONObject.fromObject (resultMap)); } else { String originalFilename = myfile.getOriginalFilename(); // String fileBaseName=FilenameUtils.getBaseName(originalFilename); String dirName = "image"; // 定义允许上传的文件扩展名 HashMap<String,String> extMap = new HashMap<String,String>(); extMap.put("image","gif,jpg,jpeg,png,bmp"); // 检查扩展名 String fileExt = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase(); if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) { resultMap.put( "result","error"); resultMap.put( "msg","上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。" ); return String. valueOf(JSONObject.fromObject (resultMap)); //return Results.byMessage(ShowTextUtils.FAIL,"上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"); } // 设置目录 if (IConstants.ISDEMO.equals("1")) { dirName = "demo/file/sys/" + dirName + "/" + new SimpleDateFormat("yyyy/yyyyMMdd").format(new Date()); } else { dirName = "file/sys/" + dirName + "/" + new SimpleDateFormat("yyyy/yyyyMMdd").format(new Date()) + "/"; } // 文件保存目录路径 String savePath = getFilePath() + dirName; // 新文件名 String newFileName = getFileName() + "." + fileExt; // 检查目录 File uploadDir = new File(savePath); if (!uploadDir.isDirectory()) { uploadDir.mkdirs(); } // 检查目录写权限 if (!uploadDir.canWrite()) { resultMap.put( "result","上传目录没有写权限。"); return String. valueOf(JSONObject.fromObject (resultMap)); } try { // 把上传的图片放到服务器的文件夹下 FileUtils.copyInputStreamToFile(myfile.getInputStream(),new File(savePath,newFileName)); } catch (Exception e) { resultMap.put( "result",e.getMessage() ); return String. valueOf(JSONObject.fromObject (resultMap)); //return Results.byMessage(ShowTextUtils.FAIL,e.getMessage()); } // 上传文件 File uploadedFile = new File(savePath,newFileName); // 上传阿里云(没有这个需求可以注释掉) upyun = new UpYun(BUCKET_NAME,OPERATOR_NAME,OPERATOR_PWD); upyun.setDebug(false); // 要传到upyun后的文件路径 String filePath = "/" + dirName + "/" + getFileName() + "." + fileExt; // 设置待上传文件的 Content-MD5 值 // 如果又拍云服务端收到的文件MD5值与用户设置的不一致,将回报 406 NotAcceptable 错误 upyun.setContentMD5(UpYun.md5(uploadedFile)); // 上传文件,并自动创建父级目录(最多10级) boolean result = upyun.writeFile(filePath,uploadedFile,true); if (result) { filePath = URL + filePath; } resultMap.put( "result","success"); resultMap.put( "msg","上传图片成功" ); resultMap.put( "filePath",filePath ); return String. valueOf(JSONObject.fromObject (resultMap)); } } public String getFilePath() { String os = System.getProperty("os.name"); if (os.toLowerCase().startsWith("win")) { // 正式环境Web所在目录 return "F:/soft/image/webapps/ROOT/"; } else { // 正式环境 linux 目录 /opt/tomcat-instance/web/webapps/ROOT/ + // “WEB-INF/outHtml/***.jsp” return "/opt/tomcat-instance/dx_manager/ROOT/"; } } public String getFileName() { SimpleDateFormat simpledateFormat = new SimpleDateFormat("yyyyMMddHHmmss"); Random random = new Random(); return simpledateFormat.format(new Date()) + random.nextInt(10000); }原文链接:https://www.f2er.com/ajax/160710.html