easyui form提交文件(上传图片和文件)

<div id="dialogBtn">
            <a class="easyui-linkbutton" href="#" onclick="addNotice()">确定</a>
            <a class="easyui-linkbutton" href="#"
                onclick="closeDialog();">取消</a>
        </div>

        <div id="addNotice" class="easyui-dialog" title="添加/编辑"
            style="width: 1000px; height: 650px;"
            data-options="iconCls:‘icon-save‘,resizable:true,modal:true,closed:true,buttons:‘#dialogBtn‘">
            <div style="padding: 10px 0 10px 60px">
                <form id="noticeForm" method="post" enctype="multipart/form-data">
                    <input type="hidden" id="webId" name="webId" />
                    <input type="hidden" name="websiteMessage.usreId"
                        value="${login_session_key.id }" />
                    <table>
                        <tr>
                            <td>
                                标&emsp;&emsp;题：
                            </td>
                            <td  >
                                <input class="easyui-validatebox"
                                    style="width: 149px; height: 20px; border: 1px solid #ccc;"
                                    type="text" name="websiteMessage.title"></input>
                            </td>

                        </tr>

                        <tr>
                            <td>
                                发布方式：
                            </td>
                            <td  >
                                <select id="method" class="easyui-combobox"
                                    name="websiteMessage.publishType" panelHeight="auto"
                                    style="width: 150px;" editable="false" required="true">
                                    <option value="1">站内公告</option>
                                    <option value="2">系统公告</option>
                                </select>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                信息类型：
                            </td>
                            <td id="upId">
                                <select id="type" class="easyui-combobox"
                                    name="websiteMessage.mtype" panelHeight="auto"
                                    style="width: 150px;" editable="false" required="true">
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                内&emsp;&emsp;容：
                            </td>
                            <td id="addUploadId">

                                <div id="systemNoticeMoren" style="overflow: hidden;">
                                    <textarea id="morenContent"
                                    style="width: 582px; height: 116px; border: 1px solid #ccc;" ></textarea>
                                </div>

                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

<script type="text/javascript"><!--
        var editxt={};//存储修改的时候的div
        var xt={};//存储系统公告的的 id  >  div1,div2...
        var i=1;
        var hasUpload=false;
        var hasMorenContent=true;//默认的编辑框
        var hasXtContent=false;//默认的编辑框
        var thisWebSiteMessageId=-1;
        var arr={};
        arr[1]="媒体报道";
        arr[2]="网站公告";
        arr[3]="成功案例";
        arr[4]="站内信息";

        //普通的文本框，没有带上传功能
        var morenContent="<div id=‘systemNoticeMoren‘ style=‘overflow: hidden;‘> <textarea id=‘morenContent‘ style=‘width: 582px; height: 116px; border: 1px solid #ccc;‘ ></textarea> </div>";
        var okImg="<img alt=‘‘ src=‘/images/oo.gif‘/>";
        var errorImg="<img alt=‘‘ src=‘/images/xx.gif‘/>";
    $(function(){

        var method=$(‘#method‘);
        var type=$(‘#type‘);
         method.combobox({
             onSelect:function(ele){
             resetWebId();
                  if(ele.value==1){
                      if(!hasMorenContent){
                          $(‘#addUploadId‘).append(morenContent);
                          hasMorenContent=true;
                      }
                    if(hasXtContent){
                        $(‘#systemNoticeXt‘).remove();
                        hasXtContent=false;
                    } 

                    $.each(xt,function(index,ele){
                        $(‘#systemNoticeXt‘+index).remove();
                    });
                    //恢复参数配置
                    resetCash();
                    //移除添加消息的按钮
                    $(‘#systemNoticeUpload‘).remove();

                      type.combobox(‘clear‘);
                      type_1(type);
                  }
                  else if(ele.value==2){
                      type.combobox(‘clear‘);
                          type_2(type);
                      //移除默认的编辑框
                      $(‘#systemNoticeMoren‘).remove();
                      hasMorenContent=false;
                      //绑定系统公告编辑框
                      if(!hasXtContent){
                      //    var xtContent="<div id=‘systemNoticeXt‘ style=‘overflow: hidden;‘> <textarea id=‘xtContent‘ style=‘width: 582px; height: 116px; border: 1px solid #ccc;‘ ></textarea> "
                        //+"<img alt=‘‘ src=‘/images/xx.gif‘><input id=‘file‘ name=‘file‘ type=‘file‘ value=‘选择文件‘/> </div>";
                          hasXtContent=true;
                      }
                  }
             }
         });
    });

    function type_1(type){
        type.combobox({
                              valueField: ‘id‘,
                            textField: ‘value‘,
                            data: [{
                                id: ‘4‘,
                                value: ‘站内信息‘,
                                selected:true
                            }],
                            onSelect:function(rec){
                                resetWebId();
                            }
                          });
    }
    function type_2(type){
        type.combobox({
                              valueField: ‘id‘,
                            textField: ‘value‘,
                            data: [{
                                id: ‘1‘,
                                value: ‘媒体报道‘,
                                selected:true
                            },{
                                id: ‘2‘,
                                value: ‘网站公告‘
                            },{
                                id: ‘3‘,
                                value: ‘成功案例‘
                            }],
                            onSelect:function(rec){
                             resetWebId();
                              var noticeId=rec.id;
                              if(noticeId==1||noticeId==3||noticeId==2){

                                  if(!hasUpload)
                                  { hasUpload=true;
                                    $(‘#upId‘).append(‘<a id="systemNoticeUpload" href="#" onclick="addDiv();">添加消息</a>‘);
                                  }
                                      $.each(xt,function(index,ele){
                                        $(‘#systemNoticeXt‘+index).remove();
                                    });

                                    //恢复参数配置
                                    xt={};//存储系统公告的的 id  >  div1,div2...
                                    i=1;
                                      hasXtContent=false;
                              }else{
                                  if(hasUpload)
                                  { hasUpload=false;
                                    $(‘#systemNoticeUpload‘).remove();
                                  }
                              }
                          }
                      });
    }

    function openNotice(){
         resetCash();
         $(‘#noticeForm‘).form(‘reset‘);
         $(‘#addNotice‘).dialog(‘open‘);
         $(‘#webId‘).val(‘‘);
         type_1($(‘#type‘));
    }
    function addNotice(){
            var time;
            var selectId=$(‘#method‘).combobox(‘getValue‘);
            var noticType=$(‘#type‘).combobox(‘getValue‘);
            var paramsId=$("#webId").val();
            if(selectId==1){
                //站内信息
                    if(paramsId==null||paramsId==‘‘){
                    $(‘#noticeForm‘).form(‘submit‘, {
                            url:‘<%=basePath%>admin/notice/notice!add.ds‘,
                            onSubmit: function(param){
                           param["websiteMessage.MContent"]=$(‘#morenContent‘).val();
                           param["comId"]=1;//表示选中第一个 2：系统公告 ，1：站内信息

                        }  ,
                            success:function(data){
                          var json=$.parseJSON(data);
                              $.messager.alert(‘温馨提示‘,json.message,‘info‘);
                              if(json.success){
                                    $(‘#sysdatabase‘).datagrid(‘reload‘);
                                   }
                            }
                    });
                }else{
                    var data={
                            ‘webId‘:paramsId,
                            ‘websiteMessage.title‘:$("input[name=‘websiteMessage.title‘]").val(),
                            ‘websiteMessage.MContent‘:$("#morenContent").val(),
                            "comId":1
                    }
                        $.post(‘/admin/notice/notice!add.ds‘,data,function(data){
                             $.messager.alert(‘温馨提示‘,data.message,‘info‘);
                              if(data.success){
                                        $(‘#sysdatabase‘).datagrid(‘reload‘);
                                   }
                        },"json");
                }
            }
            else if(selectId==2){
                //添加消息 comId=2
                if(xt){
                    $.each(xt,function(index,ele){
                     var isSubmit=true;
                         //检查文件
                         var f=document.getElementById(‘file‘+index).files;
                            if(f.length>0){
                                var filename=$(‘#file‘+index).val();
                                var suffix=filename.substring(filename.lastIndexOf("."),filename.length);
                                //.jpg,.png,.peng,.gif,.mp4,avi
                                if(suffix!=".png"&&suffix!=".jpeg"&&suffix!=".jpg"&&suffix!=".gif"&&suffix!=".avi"&&suffix!=".mp4"){
                                       alert("文件格式不对，请选择格式【.jpg,.png,.peng,.gif,.mp4,avi】的文件");
                                       isSubmit=false;
                                   }
                                if(suffix==".png"||suffix==".jpeg"||suffix==".jpg"||suffix==".bmp"||suffix==".gif"){
                                    var filesize=f.size/1024;//KB
                                    if(parseInt(filesize)>1024){
                                        alert(‘图片不能大于1M‘);
                                         isSubmit=false;
                                    }
                                }
                                if(suffix==".avi"||suffix==".mp4"){
                                    var filesize=f.seize/1024/1024;//M
                                    if(filesize>20){
                                        alert(‘视频不能大于20M‘);
                                         isSubmit=false;
                                    }
                                }
                            }
                         //提交文件
                         if(isSubmit){
                            var getFile=$(‘#file‘+index);
                            $(‘#noticeForm‘).form(‘submit‘,{
                                url:‘<%=basePath%>admin/notice/notice!add.ds‘,
                                onSubmit:function(pa){
                                    pa["comId"]=2;//表示选中第一个 2：系统公告 ，1：站内信息
                                    pa["websiteMessage.MContent"]=$(‘#xtContent‘+index).val();
                                     //获取是否选择文件
                                    var f = document.getElementById("file"+index).files.length;
                                    if(f>0)
                                    {
                                            pa["file"]=getFile.attr(‘name‘,‘file‘);//更改文件的nam属性
                                            pa["fileName"]=$(‘#file‘+index).val();
                                    }

                                    pa["noticType"]=noticType;
                                    pa["uploadCount"]=index;//索引值
                                },
                                success:function(data){
                                data=$.parseJSON(data);
                                    if(data.success){
                                      $(‘#systemNoticeXt‘+index).append(okImg);
                                    }
                                    else{
                                          $(‘#systemNoticeXt‘+index).append(errorImg);
                                         if(data.code==-1)
                                          $(‘#systemNoticeXt‘+index).append("<font color=‘red‘>"+data.message+"</font>");
                                      }
                                }
                            });
                        }
                        //还原文件的名字
                        $(‘#file‘+index).attr(‘name‘,‘file‘+index);//更改文件的nam属性
                        //设置时间，避免得到重复值
                        time=setInterval(function(){},1000);
                    });
                }<%--else if(editxt){

                    $.each(editxt,function(index,ele){
                        var eisSubmit=true;
                         //检查文件
                         var ef=document.getElementById(‘file‘+index).files;
                            if(ef.length>0){
                                var efilename=$(‘#file‘+index).val();
                                var esuffix=efilename.substring(efilename.lastIndexOf("."),efilename.length);
                                //.jpg,.png,.peng,.gif,.mp4,avi
                                if(esuffix!=".png"&&esuffix!=".jpeg"&&esuffix!=".jpg"&&esuffix!=".gif"&&esuffix!=".avi"&&esuffix!=".mp4"){
                                       alert("文件格式不对，请选择格式【.jpg,.png,.peng,.gif,.mp4,avi】的文件");
                                       eisSubmit=false;
                                   }
                                if(esuffix==".png"||esuffix==".jpeg"||esuffix==".jpg"||esuffix==".bmp"||esuffix==".gif"){
                                    var efilesize=ef.size/1024;//KB
                                    if(parseInt(efilesize)>1024){
                                        alert(‘图片不能大于1M‘);
                                         eisSubmit=false;
                                    }
                                }
                                if(esuffix==".avi"||esuffix==".mp4"){
                                    var efilesize=ef.seize/1024/1024;//M
                                    if(efilesize>20){
                                        alert(‘视频不能大于20M‘);
                                         eisSubmit=false;
                                    }
                                }
                            }
                         //提交文件
                         if(eisSubmit){
                            var egetFile=$(‘#file‘+index);
                            $(‘#noticeForm‘).form(‘submit‘,{
                                url:‘<%=basePath%>admin/notice/notice!add.ds‘,
                                onSubmit:function(pa){
                                    pa["comId"]=2;//表示选中第一个 2：系统公告 ，1：站内信息
                                    pa["websiteMessage.MContent"]=$(‘#xtContent‘+index).val();
                                    pa["webId"]=$(‘#webId‘).val();
                                     //获取是否选择文件
                                    var af = document.getElementById("file"+index).files.length;
                                    if(af>0)
                                    {
                                            pa["file"]=egetFile.attr(‘name‘,‘file‘);//更改文件的nam属性
                                            pa["fileName"]=$(‘#file‘+index).val();
                                    }

                                    pa["noticType"]=noticType;
                                    pa["uploadCount"]=index;//索引值
                                },
                                success:function(data){
                                data=$.parseJSON(data);
                                    if(data.success){
                                      $(‘#systemNoticeXt‘+index).append(okImg);
                                    }
                                    else{
                                          $(‘#systemNoticeXt‘+index).append(errorImg);
                                         if(data.code==-1)
                                          $(‘#systemNoticeXt‘+index).append("<font color=‘red‘>"+data.message+"</font>");
                                      }
                                }
                            });
                        }
                        //还原文件的名字
                        $(‘#file‘+index).attr(‘name‘,‘file‘+index);//更改文件的nam属性
                        //设置时间，避免得到重复值
                        time=setInterval(function(){},1000);
                    });
                }--%>
                //刷新表格
                 $(‘#sysdatabase‘).datagrid(‘reload‘);
            }
            clearInterval(time);
    }

    //添加系统公告的div
    function addDiv(){
    var xtContent="<div id=‘systemNoticeXt"+i+"‘ style=‘overflow: hidden;‘> <textarea id=‘xtContent"+i+"‘ style=‘width: 582px; height: 116px; border: 1px solid #ccc;‘ ></textarea> "
    +"<a href=‘#‘ onclick=‘removeDiv("+i+");‘><img alt=‘‘ src=‘/images/remove1.gif‘></a><input id=‘file"+i+"‘ name=‘file"+i+"‘ type=‘file‘ value=‘选择图片‘/>  </div>";
        $(‘#addUploadId‘).append(xtContent);
        var arrDiv={};
        arrDiv["systemNoticeXt"+i]="systemNoticeXt"+i;
        arrDiv["xtContent"+i]="xtContent"+i;
        arrDiv["file"+i]="file"+i;
        xt[i]=arrDiv;
        i++;
    }
    function removeDiv(divID){
        $(‘#systemNoticeXt‘+divID).remove();
        delete xt[divID];
    }
    function editNotice(){
        var j=$("#sysdatabase").datagrid("getSelected");
        if(!j){
            $.messager.alert("温馨提示","请选择一行数据","info");
            return ;
        }
        var publishType=j.publishType;
        if(publishType==1){
            $(‘#noticeForm‘).form(‘load‘,{
                "websiteMessage.title":j.title,
                "websiteMessage.mtype":arr[j.mtype],
                "websiteMessage.publishType":j.publishType,
                "websiteMessage.MContent":j.MContent,
                "webId":j.id
            });
            $(‘#morenContent‘).val(j.MContent);
            $(‘#addNotice‘).dialog(‘open‘);
        }
         else if(publishType==2){
                 $.messager.alert(‘温馨提示‘,‘系统公告不能修改‘,‘info‘);
         }
    }

    function deleteNotice(){
         var data=$(‘#sysdatabase‘).datagrid(‘getSelected‘);
         if(!data){
             $.messager.alert(‘温馨提示‘,‘请选择数据‘,‘info‘);
             return;
         }
         $.messager.confirm(‘确认对话框‘,‘是否删除？‘,function(r){
             if(r){
                 $.post(‘<%=basePath%>admin/notice/notice!delete.ds‘,{"id":data.id},function(d){
                     $.messager.alert(‘温馨提示‘,d.message,‘info‘);
                     if(d.success)
                     $(‘#sysdatabase‘).datagrid(‘reload‘);
                 });
             }
         });
    }
    function closeDialog(){
        $(‘#addNotice‘).dialog(‘close‘);
        resetCash();
    }
    //恢复参数
    function  resetCash(){
        //初始化参数
        $.each(xt,function(index,ele){
            $(‘#systemNoticeXt‘+index).remove();
        });
        $(‘#systemNoticeUpload‘).remove();
        xt={};//存储系统公告的的 id  >  div1,div2...
        i=1;
        hasUpload=false;
        hasMorenContent=true;//默认的编辑框
        hasXtContent=false;//默认的编辑框
        resetWebId();
    }
    function resetWebId(){
        $.post(‘<%=basePath%>admin/notice/notice!resetWebId.ds‘);
    }

  </script>

java

上传

 /**
     *
     * 基于struts2的文件上传
     * @param file 源文件
     * @param fileName 文件名
     * @param path 路径 :  /xx/
     */
    public static String  struts2uploadfile(File file,String fileName,String path) throws IOException{
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");// 格式化时间输出
        String Rname = sdf.format(new Date());// 取得当前时间，Date()是java.util包里的，这作为真实名称
        if(StringUtils.isNotBlank(fileName)){
                String realPath=ServletActionContext.getServletContext().getRealPath(path);
                File f=new File(realPath);
                if(!f.getParentFile().exists()){
                    f.getParentFile().mkdirs();
                }
                String houzhui=fileName.substring(fileName.lastIndexOf("."), fileName.length());
                Rname+=houzhui;
                File saveFile=new File(f, Rname);
                FileUtils.copyFile(file, saveFile);
        }
        return path+Rname;
    }

时间： 2024-08-26 11:55:07

easyui form提交文件(上传图片和文件)的相关文章

easyUI form提交与springMVC交互时服务端返回的错误处理

asyUI form的submit接口中没有提供error回调函数,网上一种解决方案是串联.success(function(){}).error(function(){}),然后通过jqXHR进行统一处理:但是我发现这种方案不论服务端返回正确还是异常,都会调用.error(),而且这样写代码也有点乱.经过两天摸索,基本找到了解答.对于post提交的数据,服务端的controller定义为void,不必返回值,通过在controller上注解的方式控制返回的http头.在这里发现对于easyUI

form表单系列中文件上传及预览

文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.join('static/img', fafafa.name) with open(img.path, 'wb') as f: for item in fafafa.chunks(): f.write(item) function iframeSubmit(){ $('#ifm1').load(functi

android form表单上传文件

原文地址:http://menuz.iteye.com/blog/1282097 Android程序使用http上传文件 有时,在网络编程过程中需要向服务器上传文件.Multipart/form-data是上传文件的一种方式. Multipart/form-data其实就是浏览器用表单上传文件的方式.最常见的情境是:在写邮件时,向邮件后添加附件,附件通常使用表单添加,也就是用multipart/form-data格式上传到服务器.  Html代码   <form action="/Test

jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题.这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下.现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助. 好吧,我们先看看效果截图吧: 还行吧,来看页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

使用form表单上传文件

在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" 已经是个老生常谈的问题了,相信都能注意到,就不多说了. 2.上传下载的请求是不能用ajax提交返回json的. 3.当使用input[type='file'] 的onChange事件来触发文件上传的时候要注意当上传成功时清空input的时候,不能简单的使用$("input").val(

文件上传图片

通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件.为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的网站源码,全部救变成他的了,直接打包看你的代码.所以一定要控制上传的目录与文件类型,一般只可以上传图片.要实现文件上传图片我们需要写出两个php文件,第一个php文件我们需要写出一个文件上传的页面,第二个php文件我们写出实现图片上传的功能 1 <!DOCTYPE html PUBLIC "-/

js 禁止表单提交的方法（文件上传）

添加图片上传的表单,在form 添加属性onsubmit,提交之前会执行其中的方法,若返回FALSE,不会提交,返回TRUE,才会提交 <form method="post" enctype="multipart/form-data" action="/UpLoad.ashx" onsubmit="return check()"> <input type="file" name="

关于form表单上传文件的问题

最近在学习php,刚好学到利用表单上传文件这一知识.在学习的过程中,出现了这样几个问题,我是小白,还请高手指点. 大家都知道在上传文件时,我们要设置表单的MIME编码.默认情况,enctype的编码格:application/x-www-form-urlencoded,不能用于文件上传, 只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作.但是我在接下来的操作中,遇到了这样的问题. <?php   if (isset($_POST['submit']) &

数据表格，查询、导出共用一个form表单，实现文件流方式下载

在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('#frmSearch').serialize(); 获得表单数据后,用post方式提交给服务器,服务器返回文件所存在的网络地址,然后用windows.open()的方式下载文件 但是我希望文件下载后,能够把文件删除了:用上边方式就不太合适了,不能及时删除旧文件,于是想出下面的方式: 二.文件流的方式下