SSM利用接口的方式上传文件,js调用接口上传文件,ajax利用接口上传文件

需要引用ssm上传文件的工具包

<dependency>    <groupId>commons-fileupload</groupId>    <artifactId>commons-fileupload</artifactId>    <version>1.3.1</version></dependency>

编写接口的需要的引用的上传文件类

public class UploadPictureUtil {    public  static  String addMutiparFile(MultipartFile file) throws IOException{        System.out.println("上传的文件"+file);                if (file.isEmpty()){                    return null;                }else {                    // 判断上传的文件是否为空                        String path=null;// 文件路径                        String type=null;// 文件类型                        String fileName=file.getOriginalFilename();// 文件原名称                         System.out.println("上传的文件原名称:"+fileName);                        String contentType = file.getContentType();                        String originalFileName = file.getOriginalFilename();                        String fileSuffix = originalFileName.substring(originalFileName.lastIndexOf("."));                        // 判断文件类型                        type=fileName.indexOf(".")!=-1?fileName.substring(fileName.lastIndexOf(".")+1, fileName.length()):null;                                 //获取图片全路径                                 String realPath ="/var/zzs/";                                 String urlPrefix ="http://localhost:8080/";                                 System.out.println(realPath);                                 String pathAppend = "upload/images"+"/" + Calendar.getInstance().get(Calendar.YEAR) + "/" + (Calendar.getInstance().get(Calendar.MONTH)+1) + "/" + Calendar.getInstance().get(Calendar.DAY_OF_MONTH) + "/";                                 realPath = realPath + pathAppend;                                 File dir = new File(realPath);                                 if (dir.exists()) {// 判断目录是否存在                                     System.out.println("创建目录失败，目标目录已存在！");                                 }else {                                     dir.mkdirs();                                 }                                 String newFileName = new Date().getTime() + "" + new Random().nextInt();                                 // 设置存放图片文件的路径                                path=realPath+newFileName+fileSuffix;                                System.out.println("存放图片文件的路径:"+path);                                // 转存文件到指定的路径                                file.transferTo(new File(path));                                System.out.println("文件成功上传到指定目录下");                                 return urlPrefix+pathAppend+newFileName+fileSuffix;                     }    }}

编写上传文件的接口

@RequestMapping(value="/updategrade.do")public @ResponseBody Object updategrade(MultipartFile file, HttpServletRequest request,String appid,@RequestParam  Map<String,Object> map) throws  IOException {    String campain_image= UploadPictureUtil.addMutiparFile(file);    Map result=new HashMap();    map.put("update_time",new Date());    map.put("down_url",campain_image);    try {        int a =settingService.updategrade(map);        if(a>0){            map.put("notify_time",new Date());            int b=settingService.insertgradelog(map);            if(b>0){                result.put("success",true);            }else{                result.put("success",false);            }        }        result.put("success",true);    }catch (Exception e){        e.printStackTrace();        result.put("success",false);    }    return  result;}

html页面代码

<form class="form form-horizontal" action=""  method="post"  id="form-article-add">    <div class="row cl">        <label class="form-label col-xs-4 col-sm-2">序号：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="text" class="input-text" style="border:none;width: 200px;"  value="${grademessage.app_id}"   readonly="true" id="app_id" name="app_id">        </div>        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>应用版本号：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="text" class="input-text"  style="width: 150px;" value="${grademessage.app_version}"  id="app_version"  name="app_version">        </div>        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>code：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="text" class="input-text" style="width: 50px;" value="${grademessage.app_code}"  id="app_code"  name="app_code">        </div>        <label class="form-label col-xs-4 col-sm-2">系统：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="text" class="input-text"  style="border:none;width: 200px;" value="${grademessage.app_system}" readonly="true" id="app_system" name="app_system">        </div>        <br/>        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>更新内容：</label>        <div class="formControls col-xs-8 col-sm-9">            <textarea  style="width: 500px;height: 150px;" style="border:none" id="upgrade_content"  name="upgrade_content">${grademessage.upgrade_content}</textarea>            <%--<input type="text" class="input-text"  value="${grademessage.upgrade_content}"  id="upgrade_content">--%>        </div>        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>下载地址：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="text" class="input-text"  style="width: 500px;" value="${grademessage.down_url}"  readonly="true" >        </div>        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文件上传：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="file" class="input-text"  style="width: 200px;" id="file" name="file">        </div>        <label class="form-label col-xs-4 col-sm-2">更新时间：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="text" class="input-text"  style="border:none;width: 200px;" value="${grademessage.update_time}" readonly="true" >        </div>        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>发布状态：</label>        <div class="formControls col-xs-8 col-sm-9">            <input type="radio"  style="border:none"  value="0" <c:if test="${grademessage.status==0}">checked</c:if> name="status">未发布            <input type="radio"  style="border:none"  value="1" <c:if test="${grademessage.status==1}">checked</c:if> name="status">已发布        </div>    </div>    <div class="row cl">        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">            <button onclick="report_save_submit()" class="btn btn-primary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存</button>                <%--<button  class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>--%>            <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>        </div>    </div></form>

js代码，此处需要注意的是ajax里面contentType,async,processData都为false否则会报错

function report_save_submit() {    if ($('#file').val() == null || $('#file').val() == '') {        alert('请选择文件上传');    } else {    var formData = new FormData($("#form-article-add")[0]);    $.ajax({        url: '此处为接口地址',        type: 'POST',        data: formData,        async: false,        contentType: false,        processData: false,        success: function (data) {            if (data.success) {                layer.msg('修改成功', {time: 2000, icon: 6});                window.parent.location.reload();                layer.full(index)            } else {                layer.msg('修改失败', {time: 2000, icon: 6});            }        },        error: function (data) {        }    });}}