AJAX 上传文件

最新推荐文章于 2022-10-27 14:47:48 发布

最新推荐文章于 2022-10-27 14:47:48 发布 · 132 阅读

文章标签：

#Ajax #JavaScript #CSS #XHTML #HTML #ViewUI

JAVA 专栏收录该内容

49 篇文章

订阅专栏

AJAX上传不了文件

如果需要无刷新上传文件,请使用隐藏的iframe来代替

IFRAME:

<iframe frameborder="0" scrolling="no" resizable="no" allowtransparency="true" cellspacing="0" border="0" style="border: 0px none; height: 30px; width: 100%;" src="/attachments/new"></iframe>

<!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" xml:lang="zh-CN" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="http://www.iteye.com/stylesheets/attachment.css?1272259777" media="screen" rel="stylesheet" type="text/css" />
    <script src="http://www.iteye.com/javascripts/application.js?1263904280" type="text/javascript"></script>
  </head>
  <body>
    <form action="/attachments" enctype="multipart/form-data" id="attachment_form" method="post">      <input id="attachment_uploaded_data" name="attachment[uploaded_data]" onchange="upload(this.value);" size="30" type="file" /> <span id="spinner" style="display:none;">上传中 <img alt="Spinner" src="http://www.iteye.com/images/spinner.gif?1230301943" /></span>

    </form>
    
    <script type="text/javascript">
      if(document.location.host != "www.iteye.com") document.domain = "iteye.com";
      function upload(fileName) {
        if (!$A(['jpg','jpeg','bmp','png','gif','rar','zip', 'tar', 'gz', 'jar', 'war', 'bz2', 'pdf']).any(function(extName){return new RegExp('\\.'+extName+'$','i').test(fileName);})){
          alert("如果您上传图片，请上传png, jpg, gif或者bmp格式的图片\n如果您上传附件，请先压缩再上传");
          return false;
        }        
        var counter = parseInt(window.parent.$('attachments_counter').value) + 1;
        window.parent.$('attachments_counter').value = counter;
        window.parent.$('submit_button').value = counter + " 个文件正在上传中，请等待完成后再提交";
        $('spinner').show();        
        var iframes = window.parent.$("attachment_iframes");
        iframes.appendChild(iframes.getElementsByTagName('iframe')[0].cloneNode(false));
        $('attachment_form').submit();
      }
    </script>
  </body>
</html>