表单页面up.php(,弹出test.php进行多图上传。需求在上传图片后能直接file.php返回图片路径结果up.php的input里,因是多图,所以路径部分要用,分隔)
<script type="text/javascript">    
function openSubWin()    
{    
var _width = 600 ;    
var _height = 500 ;    
var _left = (screen.width - _width) / 2 ;    
var _top = (screen.height - _height) / 2 ;    
window.open("test.php",null,    
"height=" + _height + ",width=" + _width + ",status=no,toolbar=no,menubar=yes,location=no,resizable=no,scrollbars=yes',left=" + _left + ",top=" + _top);    
}    
</script>  <form name="form1" id="form1">  
<input type="text" name="pic" id="pic"/>    
<input type="button" value="弹出子页面" onClick="openSubWin();">    
</form>
test.php,在这页选择多图进行上传<!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=gb2312" />
 <title>无刷新文件上传系统</title>
 </head>
 <body>
 <style>
 .fu_list {
  width:600px;
  background:#ebebeb;
  font-size:12px;
 }
 .fu_list td {
  padding:5px;
  line-height:20px;
  background-color:#fff;
 }
 .fu_list table {
  width:100%;
  border:1px solid #ebebeb;
 }
 .fu_list thead td {
  background-color:#f4f4f4;
 }
 .fu_list b {
  font-size:14px;
 }
 /*file容器样式*/
a.files {
  width:90px;
  height:30px;
  overflow:hidden;
  display:block;
  border:1px solid #BEBEBE;
  background:url(img/fu_btn.gif) left top no-repeat;
  text-decoration:none;
 }
 a.files:hover {
  background-color:#FFFFEE;
  background-position:0 -30px;
 }
 /*file设为透明,并覆盖整个触发面*/
a.files input {
  margin-left:-350px;
  font-size:30px;
  cursor:pointer;
  filter:alpha(opacity=0);
  opacity:0;
 }
 /*取消点击时的虚线框*/
a.files, a.files input {
  outline:none;/*ff*/
  hide-focus:expression(this.hideFocus=true);/*ie*/
 }
 </style>
 <form id="uploadForm" action="File.php">
   <table border="0" cellspacing="1" class="fu_list">
     <thead>
       <tr>
         <td colspan="2"><b>上传文件</b></td>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td align="right" width="15%" style="line-height:35px;">添加文件:</td>
         <td><a href="javascript:void(0);" class="files" id="idFile"></a> <img id="idProcess" style="display:none;" src="img/loading.gif" /></td>
       </tr>
       <tr>
         <td colspan="2"><table border="0" cellspacing="0">
             <thead>
               <tr>
                 <td>本地路径</td>
                 <td width="100"></td>
               </tr>
             </thead>
             <tbody id="idFileList">
             </tbody>
           </table></td>
       </tr>
       <tr>
         <td colspan="2" style="color:gray">温馨提示:最多可同时上传 <b id="idLimit"></b> 个文件,只允许上传 <b id="idExt"></b> 文件。 </td>
       </tr>
       <tr>
         <td colspan="2" align="center" id="idMsg"><input type="button" value="开始上传" id="idBtnupload" disabled="disabled" />
           &nbsp;&nbsp;&nbsp;
           <input type="button" value="全部取消" id="idBtndel" disabled="disabled" />
         </td>
       </tr>
     </tbody>
   </table>
 </form>
 <script type="text/javascript">var isIE = (document.all) ? true : false;var $ = function (id) {
     return "string" == typeof id ? document.getElementById(id) : id;
 };var Class = {
   create: function() {
     return function() {
       this.initialize.apply(this, arguments);
     }
   }
 }var Extend = function(destination, source) {
  for (var property in source) {
   destination[property] = source[property];
  }
 }var Bind = function(object, fun) {
  return function() {
   return fun.apply(object, arguments);
  }
 }var Each = function(list, fun){
  for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
 };//文件上传类
var FileUpload = Class.create();
 FileUpload.prototype = {
   //表单对象,文件控件存放空间
  initialize: function(form, folder, options) {
  
  this.Form = $(form);//表单
 this.Folder = $(folder);//文件控件存放空间
 this.Files = [];//文件集合
 
  this.SetOptions(options);
  
  this.FileName = this.options.FileName;
  this._FrameName = this.options.FrameName;
  this.Limit = this.options.Limit;
  this.Distinct = !!this.options.Distinct;
  this.ExtIn = this.options.ExtIn;
  this.ExtOut = this.options.ExtOut;
  
  this.onIniFile = this.options.onIniFile;
  this.onEmpty = this.options.onEmpty;
  this.onNotExtIn = this.options.onNotExtIn;
  this.onExtOut = this.options.onExtOut;
  this.onLimite = this.options.onLimite;
  this.onSame = this.options.onSame;
  this.onFail = this.options.onFail;
  this.onIni = this.options.onIni;
  
  if(!this._FrameName){
   //为每个实例创建不同的iframe
   this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
   //ie不能修改iframe的name
  var oFrame = isIE ? document.createElement("<iframe name=\"" + this._FrameName + "\">") : document.createElement("iframe");
   //为ff设置name
   oFrame.name = this._FrameName;
   oFrame.style.display = "none";
   //在ie文档未加载完用appendChild会报错
  document.body.insertBefore(oFrame, document.body.childNodes[0]);
  }
  
  //设置form属性,关键是target要指向iframe
  this.Form.target = this._FrameName;
  this.Form.method = "post";
  //注意ie的form没有enctype属性,要用encoding
  this.Form.encoding = "multipart/form-data"; //整理一次
 this.Ini();
   },
   //设置默认属性
  SetOptions: function(options) {
     this.options = {//默认值
  FileName: "Files[]",//文件上传控件的name,配合后台使用
  FrameName: "",//iframe的name,要自定义iframe的话这里设置name
   onIniFile: function(){},//整理文件时执行(其中参数是file对象)
   onEmpty: function(){},//文件空值时执行
  Limit:  10,//文件数限制,0为不限制
  onLimite: function(){},//超过文件数限制时执行
  Distinct: true,//是否不允许相同文件
  onSame:  function(){},//有相同文件时执行
  ExtIn:  ["png","gif","jpg"],//允许后缀名
  onNotExtIn: function(){},//不是允许后缀名时执行
  ExtOut:  [],//禁止后缀名,当设置了ExtIn则ExtOut无效
  onExtOut: function(){},//是禁止后缀名时执行
  onFail:  function(){},//文件不通过检测时执行(其中参数是file对象)
   onIni:  function(){}//重置时执行
    };
     Extend(this.options, options || {});
   },
   //整理空间
  Ini: function() {
  //整理文件集合
 this.Files = [];
  //整理文件空间,把有值的file放入文件集合
 Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
   if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
  }))
  //插入一个新的file
  var file = document.createElement("input");
  file.name = this.FileName; file.type = "file"; file.onchange = Bind(this, function(){ this.Check(file); this.Ini(); });
  this.Folder.appendChild(file);
  //执行附加程序
 this.onIni();
   },
   //检测file对象
  Check: function(file) {
  //检测变量
 var bCheck = true;
  //空值、文件数限制、后缀名、相同文件检测
 if(!file.value){
   bCheck = false; this.onEmpty();
  } else if(this.Limit && this.Files.length >= this.Limit){
   bCheck = false; this.onLimite();
  } else if(!!this.ExtIn.length && !RegExp(".(" + this.ExtIn.join("|") + ")$", "i").test(file.value)){
   //检测是否允许后缀名
  bCheck = false; this.onNotExtIn();
  } else if(!!this.ExtOut.length && RegExp(".(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
   //检测是否禁止后缀名
  bCheck = false; this.onExtOut();
  } else if(!!this.Distinct) {
   Each(this.Files, function(o){ if(o.value == file.value){ bCheck = false; } })
   if(!bCheck){ this.onSame(); }
  }
  //没有通过检测
 !bCheck && this.onFail(file);
   },
   //删除指定file
   Delete: function(file) {
  //移除指定file
  this.Folder.removeChild(file); this.Ini();
   },
   //删除全部file
   Clear: function() {
  //清空文件空间
 Each(this.Files, Bind(this, function(o){ this.Folder.removeChild(o); })); this.Ini();
   }
 }var fu = new FileUpload("uploadForm", "idFile", { ExtIn: ["png","gif","jpg"],
  onIniFile: function(file){ file.value ? file.style.display = "none" : this.Folder.removeChild(file); },
  onEmpty: function(){ alert("请选择一个文件"); },
  onLimite: function(){ alert("超过上传限制"); },
  onSame: function(){ alert("已经有相同文件"); },
  onNotExtIn: function(){ alert("只允许上传" + this.ExtIn.join(",") + "文件"); },
  onFail: function(file){ this.Folder.removeChild(file); },
  onIni: function(){
   //显示文件列表
  var arrRows = [];
   if(this.Files.length){
    var oThis = this;
    Each(this.Files, function(o){
     var a = document.createElement("a"); a.innerHTML = "取消"; a.href = "javascript:void(0);";
     a.onclick = function(){ oThis.Delete(o); return false; };
     arrRows.push([o.value, a]);
    });
   } else { arrRows.push(["<font color='gray'>没有添加文件</font>", "&nbsp;"]); }
   AddList(arrRows);
   //设置按钮
  $("idBtnupload").disabled = $("idBtndel").disabled = this.Files.length <= 0;
  }
 });$("idBtnupload").onclick = function(){
  //显示文件列表
 var arrRows = [];
  Each(fu.Files, function(o){ arrRows.push([o.value, "&nbsp;"]); });
  AddList(arrRows);
  
  fu.Folder.style.display = "none";
  $("idProcess").style.display = "";
  $("idMsg").innerHTML = "正在添加文件中,请稍候……<br />有可能因为网络问题,出现程序长时间无响应,请点击“<a href='?'><font color='red'>取消</font></a>”重新上传文件";
  
  fu.Form.submit();
 }//用来添加文件列表的函数
function AddList(rows){
  //根据数组来添加列表
 var FileList = $("idFileList"), oFragment = document.createDocumentFragment();
  //用文档碎片保存列表
 Each(rows, function(cells){
   var row = document.createElement("tr");
   Each(cells, function(o){
    var cell = document.createElement("td");
    if(typeof o == "string"){ cell.innerHTML = o; }else{ cell.appendChild(o); }
    row.appendChild(cell);
   });
   oFragment.appendChild(row);
  })
  //ie的table不支持innerHTML所以这样清空table
  while(FileList.hasChildNodes()){ FileList.removeChild(FileList.firstChild); }
  FileList.appendChild(oFragment);
 }
 $("idLimit").innerHTML = fu.Limit;$("idExt").innerHTML = fu.ExtIn.join(",");$("idBtndel").onclick = function(){ fu.Clear(); }//在后台通过window.parent来访问主页面的函数function Finish(msg){
alert(msg); location.href = location.href; 
//alert(msg); location.href = location.href; 
 }
</script>
     
 </body>
 </html>
 

解决方案 »

  1.   


    这个是file.php处理多图上传结果,网上下的代码,不成熟,上传图后自动返回test.php进行刷新,发现$uploadfile这个是上传后的路径结果,但路径只会在上传成功后在test.php弹出对话框。
    <!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=gb2312" />
     <title>无标题文档</title>
     </head>
     <body>
     <?
     $sort=12;
     $f_type=strtolower("png,jpg,gif");//设置可上传的文件类型 
    $file_size_max=200*1024*1024;//限制单个文件上传最大容量 
    $overwrite = 0;//是否允许覆盖相同文件,1:允许,0:不允许 
    $f_input="Files";//设置上传域名称
        foreach($_FILES[$f_input]["error"] as $key => $error){ 
             $up_error="no"; 
             if ($error == UPLOAD_ERR_OK){ 
                 $f_name=$_FILES[$f_input]['name'][$key];//获取上传源文件名 
       
                 $uploadfile=$uploaddir.strtolower(basename($f_name)); 
                  
                 $tmp_type=substr(strrchr($f_name,"."),1);//获取文件扩展名
       $tmp_type=strtolower($tmp_type); 
                 if(!stristr($f_type,$tmp_type)){ 
                     echo "<script>alert('对不起,不能上传".$tmp_type."格式文件, ".$f_name." 文件上传失败!')</script>"; 
                     $up_error="yes"; 
                 } 
                  
                 if ($_FILES[$f_input]['size'][$key]>$file_size_max) { 
        
                     echo "<script>alert('对不起,你上传的文件 ".$f_name." 容量为".round($_FILES[$f_input]
     ['size'][$key]/1024)."Kb,大于规定的".($file_size_max/1024)."Kb,上传失败!')</script>"; 
                     $up_error="yes"; 
                 } 
                  
                 if (file_exists($uploadfile)&&!$overwrite){ 
                     echo "<script>alert('对不起,文件 ".$f_name." 已经存在,上传失败!')</script>"; 
                     $up_error="yes"; 
                 } 
                  $string = 'abcdefghijklmnopgrstuvwxyz0123456789';
     $rand = '';
     for ($x=0;$x<12;$x++)
       $rand .= substr($string,mt_rand(0,strlen($string)-1),1);
     $t=date("ymdHis").substr($gettime[0],2,6).$rand;
     $attdir="./file/";  
         if(!is_dir($attdir))   
         {  mkdir($attdir);}
                 $uploadfile=$attdir.$t.".".$tmp_type; 
                 if(($up_error!="yes") and (move_uploaded_file($_FILES[$f_input]['tmp_name'][$key], $uploadfile))){   $_msg=$_msg.$f_name.'上传成功,请关闭页面';
                 } 
        else{
        $_msg=$_msg.$f_name.'上传失败';
        }
             } 
     
         } 
     
     echo "<script>window.parent.Finish('".$_msg."');</script>"; 
     ?>
     </body>
     </html>
      

  2.   

    在 test.php 的 Finish 函数中(location.href = location.href; 之前)加入
    opener.document.getElementById('pic').value += msg;
    即可,内容自己调整