JQUERY FILE UPLOAD在项目中的应用

时间：2024-03-26 15:39:24

                  上传控件操作文档

引用方式

该控件使用的是开源框架JQUERY FILE UPLOAD ，该控件对应项目的HTML中引入如下HTML即可：“jquery_fileupload_common.html”。

该控件的引用可以放到一个IFRAME中。

例如：

<iframe  style="float:right"name="content_frame"marginwidth=0marginheight=0width=75%height=300pxsrc="page/management/appi/form_fileupload.html"frameborder=0></iframe>

效果

该控件目前可以数量校验，

JQUERY FILE UPLOAD在项目中的应用

可验证文件大小

 JQUERY FILE UPLOAD在项目中的应用JQUERY FILE UPLOAD在项目中的应用

 

可校验文件类型


JQUERY FILE UPLOAD在项目中的应用JQUERY FILE UPLOAD在项目中的应用

生成文件路径

现默认的文件生成路径为***\web\upload\

upload文件目录下会按日期生成日期文件夹

如下：

JQUERY FILE UPLOAD在项目中的应用

文件的相关程序解读

spring-mvc 中配置

<!-- 文件上传 -->
<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- 设置上传文件的最大尺寸为5MB -->
   <property name="maxUploadSize">
      <value>5242880</value>
   </property>
</bean>

其中需要引入2个JAR

common -fileupload ,commons-io

 

 

页面方面：

jquery_fileupload_common.html 中的

<form id="fileupload" action="" method="POST" enctype="multipart/form-data"> 需要 遵照如上写法，引入的JS和CSS也不要做随意的删除，因为FILEUPLOAD的JS之间是有关联的，它们的耦合性很高。
 
JS方面：
<script id="template-upload" type="text/x-tmpl">
为上传模板相关页面的设置。
<script id="template-download" type="text/x-tmpl">
为下载模板相关的页面设置
程序逻辑校验，如下，大家看看注释就明白了。
var uploader = $("#fileupload");
 uploader.fileupload(

{
         url: 'app/fileUPloadForm/getin.do',
         dataType: 'json',
         autoUpload: false,
         acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,
         maxNumberOfFiles : 1,
         maxFileSize: 1*1024*1024 ,
         minFileSize: 5*1024,
         messages: {
             acceptFileTypes:'上传文件只允许是gif|jpe?g|png其中之一',
             maxFileSize: '图片文件大小超过允许的最大值,最大值为1M！',
             minFileSize: '图片文件大小小于允许的最小值,最小值为5K！',
             maxNumberOfFiles: '上传的文件数量超过允许的最大值！'
         },
    //提交前执行
        submit: function (e, data) {
           /* var funcId=$(window.parent.document).find("#funcId").val();
            data.formData = {funcId: funcId };*/


      },
    //服务器成功响应处理函数
         success: function (data, status)
         {

             if ('error'==data) {

                     toastr.error("图片上传失败!");

             }
             else
             {
                 toastr.success("图片上传成功");
                 // $('#fileupload').fileupload('destroy');
                 //上传成功后自动删除全部节点
                 $('#fileupload').find('.files').empty();

             }
         },
         error: function (data, status, e)//服务器响应失败处理函数
         {
             toastr.error("图片上传失败，服务器未响应!");
         },
      progressall : function (e, data) {

          //进度条显示
     var progress = parseInt(data.loaded / data.total * 100, 10);
     $('#tprogress').css('width', progress + '%');
     $('#tprogress').find("span").remove();
     $('#tprogress').append('<span>'+progress+' %</span>');
     //上传图片过程中点击删除节点
          $('#fileupload').find('button:reset').bind('click',function () {
              $('#fileupload').find('.files').empty();
          });
          $('#fileupload').find("button[type='button']").bind('click',function () {
              $(this).attr("index","1");
             $('#fileupload').find("button[index='1']").parent().parent().remove();

          });
     }
 

java ：controller

需要注意的如下，如果是页面引入IFRAME， @RequestMapping需要这样写：**/fileUPloadForm，因为页面会调用IFRAME的时候会自动加上当前页面的前缀。
接收前台发送的请求的时候。
@RequestMapping(value = "/getin.do", method = RequestMethod.POST)
RequestMethod必须为POST

 

 JQUERY FILE UPLOAD在项目中的应用

后续及扩展

FILE UPLOAD 的功能很强大 ，所以该控件还有很多可以扩展的东西，每个人也可以摘出我的空间中的相关程序做完善，然后引入到你自己的项目程序中。

相关文章