jquery ui dialog iframe swfuplaod提交

最新推荐文章于 2021-03-18 19:45:15 发布

gavinlau123

最新推荐文章于 2021-03-18 19:45:15 发布

阅读量107

点赞数

分类专栏： Jquery 文章标签： UI jQuery CSS JavaScript IE ViewUI

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>上传</title>
  <#include "/WEB-INF/upload/add_head.ftl"/>
  <style type="text/css">
   /*demo page css*/
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
   .demoHeaders { margin-top: 2em; }
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
   ul#icons {margin: 0; padding: 0;}
   ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
   ul#icons span.ui-icon {float: left; margin: 0 4px;}
  </style>
  <script type="text/javascript">
  // Dialog
  $(function(){


    $('#dialog').dialog({
     autoOpen: false,
     width: 600,
     modal:true,
     bgiframe: true,
     open:function(){
                   $("#dialog").load("http://localhost:8080/app/admin/upload/Com_checkFile.do");
                  },

     buttons: {
      "Ok": function() {
       $(this).dialog("close");
      },
      "Cancel": function() {
       $(this).dialog("close");
      }
     }
    });

    // Dialog Link
    $('#dialog_link').click(function(){
     $('#dialog').dialog('open');
     return false;
    });


   });


  var swfu;
  window.onload = function() {
   var settings = {
    flash_url : "${base}/swfupload_res/swfupload/swfupload.swf",
    upload_url: "Com_save.do",
    post_params: {"jsessionid" : "sessionid"},
    file_types : "*.*",
    file_types_description : "All Files",
    file_upload_limit : 100,
    file_queue_limit : 0,
    file_post_name:"attachment",//加了这个，在webwork的action中要用
    custom_settings : {
     progressTarget : "fsUploadProgress",
     cancelButtonId : "btnCancel"
    },
    debug: false,

    // Button settings
    button_image_url: "${base}/swfupload_res/images/TestImageNoText_65x29.png",
    button_width: "65",
    button_height: "29",
    button_placeholder_id: "spanButtonPlaceHolder",
    button_text: '<span class="theFont">上传</span>',
    button_text_style: ".theFont { font-size: 16; }",
    button_text_left_padding: 12,
    button_text_top_padding: 3,

    // The event handler functions are defined in handlers.js
    file_queued_handler : fileQueued,
    file_queue_error_handler : fileQueueError,
    file_dialog_complete_handler : fileDialogComplete,
    upload_start_handler : uploadStart2,
    upload_progress_handler : uploadProgress,
    upload_error_handler : uploadError,
    upload_success_handler : uploadSuccess,
    upload_complete_handler : uploadComplete,
    queue_complete_handler : queueComplete // Queue plugin event
   };

   swfu = new SWFUpload(settings);
      };

    function uploadStart2(file) {

//服务器检查开始
   $.ajaxSetup({
async: false
});
   var status;

   $.post('Com_checkFile.do', {
  fileName:file.name,
  fileSize:file.size,
  floderPath:"/user/floder"
},
  function(data) {
    status=data;
  }
);

if(status=="0")
{
    //正常上传
}
else if(status=="1")//文件同名
{
    if(!confirm("该目录下已有同名文件，是否覆盖？"))
    {
       this.cancelUpload();
       return false;
    }
}

else if(status=="2")//磁盘已满
{
     window.alert("您的磁盘空间已满");
     this.cancelUpload();
       return false;
}
else
{
      window.alert("Server(IO) Exception");
      this.cancelUpload();
     return false;
}
//服务器检查结束

try {
  /* I don't want to do any file validation or anything, I'll just update the UI and
  return true to indicate that the upload should start.
  It's important to update the UI here because in Linux no uploadProgress events are called. The best
  we can do is say we are uploading.
   */
  var progress = new FileProgress(file, this.customSettings.progressTarget);
  progress.setStatus("上传中...");
  progress.toggleCancel(true, this);
}
catch (ex) {}

return true;
}
</script>
</head>
<body>
${session.id}
  <div id="content">
   <form id="form1" action="Com_add.do" method="post"
    enctype="multipart/form-data">

    <div class="fieldset flash" id="fsUploadProgress">
     <span class="legend">上传队列</span>
    </div>
    <div id="divStatus">
     0 个文件上传
    </div>
    <div>
     <span id="spanButtonPlaceHolder"></span>
     <input id="btnCancel" type="button" value="取消"
      οnclick="swfu.cancelQueue();" disabled="disabled"
      style="margin-left: 2px; font-size: 8pt; height: 29px;" />
    </div>

   </form>
   <hr/>
   <h2 class="demoHeaders">Dialog</h2>
  <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>

  <div id="dialog" title="Dialog Title">
  </div>

  <span οnclick="javascript:$(window.parent.document.location.reload())">Parent window</span>

  </div>
</body>
</html>

======================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传</title>
<#include "/WEB-INF/upload/add_head.ftl"/>
<style type="text/css">
   /*demo page css*/
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
   .demoHeaders { margin-top: 2em; }
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
   ul#icons {margin: 0; padding: 0;}
   ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
   ul#icons span.ui-icon {float: left; margin: 0 4px;}
  </style>
   <script type="text/javascript">
  // Dialog
  $(function(){
         alert("hahah");
    // Dialog Link
    $('#dialog_link').click(function(){
     //
     var dialogc='<div id="dialog" title="Dialog Title"></div>';
     $("body").append(dialogc);

     //
      $('#dialog').html('<iframe src="${base}/admin/upload/Com_add.do" height="300" width="400"></iframe>');
     //
     $('#dialog').dialog({
     autoOpen: false,
     width: 600,
     modal:true,
     bgiframe: true
    });
     //
     //
     $('#dialog').dialog('open');
     return false;
    });




    // Dialog Link
    $('#dialog_link2').click(function(){
     //
     var dialogc='<div id="dialog" title="Dialog Title"></div>';
     $("body").append(dialogc);

     //
      $('#dialog').html('<iframe src="http://192.168.1.154:8080/app/admin/upload/Com_add.do" height="300" width="400"></iframe>');
     //
     $('#dialog').dialog({
     autoOpen: false,
     width: 600,
     modal:true,
     bgiframe: true
    });
     //
     //
     $('#dialog').dialog('open');
     return false;
    });


   });
</script>
</head>
<body>
${session.id}
  <div id="content">
   <h2 class="demoHeaders">Dialog</h2>
  <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>

  <p><a href="#" id="dialog_link2" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>



  </div>
</body>
</html>

取消关闭

====================================================================

In Javascript

$("#myDialog").dialog({
dialogClass: "my-dialog"
});
In CSS

.my-dialog .ui-dialog-titlebar-close{
display: none;
}
--------------------------------------------------

buttons: {
'Delete all items in recycle bin': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
=====================================================================

下载中文名处理

需求:文件上传,保存到数据库的image/blob字段中,点击链接进行下载.
若文件名为中文,则经查证网上的资料得知,在ie与ff/opera中需要分别进行不同的处理,方能正确显示文件名.

据此,在下载文件的方法中,传入request参数,根据request.getHeader("user-agent")来判断客户端使用的是哪种浏览器.
如果是IE,则使用response.setHeader("Content-Disposition","attachment;filename=\""+ java.net.URLEncoder.encode(filename,"UTF-8") + "\"");
若使用ff/opera,则使用response.setHeader("Content-Disposition",attachment;filename=\""+ new String(filename.getBytes("UTF-8"),"ISO8859-1")+ "\"");

=====================================================================

struts2 ：
public String downLoadFile()
     {
    try {

      // contextPvd.getRequest().setCharacterEncoding("utf-8");

       String path = contextPvd.getRequest().getParameter("path");





       String realFilePath = contextPvd.getRequest().getSession().getServletContext().getRealPath(path);
       File file=new File("D:\\WorkSpace\\netdisk\\TestPlace\\work\\eclipse\\netdisk\\WebRoot\\upload\\哈哈web-form-portlet-5.2.2.1 - 副本.war");




       String mimeType = contextPvd.getRequest().getSession().getServletContext().getMimeType(realFilePath);
    if (mimeType == null) {
     mimeType = "application/octet-stream";
    }
    //设置MIME类型
     contextPvd.getResponse().setContentType(mimeType);

       contextPvd.getResponse().setHeader("Content-Disposition", "attachment; filename=\"" + "我的测试.rar" + "\"");

    OutputStream output= contextPvd.getResponse().getOutputStream();
    FileInputStream input = new FileInputStream(realFilePath);
    try {
     //基于byte数组读取文件并直接写入OutputStream, 数组默认大小为4k.
     IOUtils.copy(input, output);
     output.flush();
    } finally {
     //保证Input/Output Stream的关闭.
     IOUtils.closeQuietly(input);
     IOUtils.closeQuietly(output);
    }
  } catch (FileNotFoundException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
      return null;
     }