easyui图片上传demo

本文展示了一个使用EasyUI实现的JSP图片上传示例。通过一个简单的HTML表单和JavaScript函数SealSignatureInputImage,实现了点击上传按钮后,利用ajaxSubmit进行文件提交。当图片上传成功时,会显示系统提示消息。

JSP: 

<form id="file_form" method="post" action="http://172.16.0.61:8080/Eagleflight/UploadImageAction/DdUpload.do"

      enctype="multipart/form-data">
   
<!-- 图片显示  上传完才能显示-->
<img id="imgurl1"   style="width:59px;height:22px" >
<div>
<!-- 选择了图片后触发 用于应付后台添加到对应的实体类 因为文件上传不会排序 所以只能通过这个来 -->
<input type="hidden" id="IsCheck1" name="IsCheck1">
<input name="file" data-options="onChange:function(){$('#IsCheck1').val(1)}" style="width: 150px;height:22px;" class="easyui-filebox" buttonText="选择图片"/>

</div>

<!-- 由于表单不能刷新  所以这个onclick在上传完后能有效果 你可以在之后加刷新 -->

<a id="upload"  onclick="SealSignatureInputImage()" class="easyui-linkbutton"
              style="width: 80%; height: 30px;">上传</a>

</form>


aciton 自己理解吧,不难懂

@ResponseBody
@RequestMapping(value = "/DdUpload", method = { RequestMethod.POST})
   public String DdUpload(final HttpServletRequest req, HttpServletResponse resp,
           @RequestParam(value = "file") MultipartFile... files)
           throws IOException, Exception {
//req.getParameter("one"), req.getParameter("two"),req.getParameter("three"),)
zlFinalUserImage zlFinalUserimage = new zlFinalUserImage();
zlFinalUserimage.setUserid(Integer.parseInt(req.getParameter("UserSealSignaturePaid")));
String filename = "";
    if(files==null){
    return "失败";
    }
    int i=0;
       for (MultipartFile f : files) {
           if (f.getSize() > 0) {
               File targetFile = new File(req.getSession().getServletContext().getRealPath("/")+"sealsignature/"+f.getOriginalFilename());
               filename += targetFile.getName()+",";
               f.transferTo(targetFile);// 写入目标文件     不要存入数据库的话 下面的都可以不要    
               
               if(!req.getParameter("IsCheck1").equals("")&&i<1){
                zlFinalUserimage.setCaactestisign(req.getParameter("Caacjy"));
                zlFinalUserimage.setCaactestimage(targetFile.getName());
                i=1;
                continue;
               }
               if(!req.getParameter("IsCheck2").equals("")&&i<2){
                zlFinalUserimage.setCaacrepairisign(req.getParameter("Caacxl"));
                zlFinalUserimage.setCaacrepairimage(targetFile.getName());
                i=2;
                continue;
               }
               if(!req.getParameter("IsCheck3").equals("")&&i<3){
                zlFinalUserimage.setCaacreleaseisign(req.getParameter("Caacfx"));
                zlFinalUserimage.setCaacreleaseimage(targetFile.getName());
                i=3;
                continue;
               }
               if(!req.getParameter("IsCheck4").equals("")&&i<4){
                zlFinalUserimage.setDatamanagersign(targetFile.getName());
                i=4;
                continue;
               }
               if(!req.getParameter("IsCheck5").equals("")&&i<5){
                zlFinalUserimage.setFaatestsign(req.getParameter("Faajy"));
                zlFinalUserimage.setFaatestimage(targetFile.getName());
                i=5;
                continue;
               }
               if(!req.getParameter("IsCheck6").equals("")&&i<6){
                zlFinalUserimage.setFaarepairsign(req.getParameter("Faaxl"));
                zlFinalUserimage.setFaarepairimage(targetFile.getName());
                i=6;
                continue;
               }
               if(!req.getParameter("IsCheck7").equals("")&&i<7){
                zlFinalUserimage.setFaareleasesign(req.getParameter("Faafx"));
                zlFinalUserimage.setFaareleaseimage(targetFile.getName());
                i=7;
                continue;
               }
               if(!req.getParameter("IsCheck8").equals("")&&i<8){
                zlFinalUserimage.setProductionschedulingimage(targetFile.getName());
                i=8;
                continue;
               }
               if(!req.getParameter("IsCheck9").equals("")&&i<9){
                zlFinalUserimage.setAutograph(targetFile.getName());
                i=9;
                continue;
               }
           }
       }
       if(UploadImageActionservice.Imgmanage(zlFinalUserimage)<0){
        return "新增失败";
       }
       return filename;
   }

js:

function SealSignatureInputImage(){
$('#file_form').ajaxSubmit({
        dataType : 'json',
        success : function(data) {    

//这里你可以当成ajax用,解决的表单刷新问题
        if(data!="新增失败"){
        $.messager.show({
        title:'系统提示',
        msg:'上传个人所属图片成功。',
        showType:'slide'
        });

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值