ajax上传图片文件

2019-11-26 16:07栏目:龙竞技官网
TAG:

本文实例为大家分享了php表单文件iframe异步上传的具体代码,供大家参考,具体内容如下

一个最原始最简单的iframe上传例子:

这里用的是一个隐藏的iframe,这样可以让form表单提交到这个iframe里面,用户就看不到页面的刷新了

1.表单中放置iframe元素; 2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件,并且将表单的target设置为iframe,让iframe去提交到服务器进行文件上传; 3.img_upload_竞技宝app,process.php中处理文件上传成功后,将上传成功保存的文件路径回传给表单中隐藏域; 4.点击表单提交按钮的时,JS设置表单action为接收表单数据的form_process.php文件,表单的target设置为_self。

本例中采用iframe名字,所以表单在提交时会在iframe内打开链接(即无刷新,确切的说应该是
感觉无刷新)
在表单提交时,调用startUpload方法,当然这是JS定义的。

 

表单:asyn_uplaod.html

前台上传页面index.html,主要是一个表单与一个js回调函数。上传文件时,form表单的method、 enctype属性必须和下面代码一样。然后将target的值设为iframe的name,这样就可以实现无刷新上传文件。

 

图片异步上传function startUpload{ document.getElementById.innerHTML = '上传中...'; formObj.action = 'img_upload_process.php'; formObj.target = 'uploadframe'; formObj.submit(); }function formSubmit { formObj.action = 'form_process.php'; formObj.target = '_self'; //清空文件上传内容,防止重复提交 var fileObj = document.getElementById ; // for IE, Opera, Safari, Chrome if  { fileObj.outerHTML = fileObj.outerHTML; } else { // FF fileObj.value = ""; } formObj.submit(); }

 代码如下

前段时间在解决ajax上传文件时折腾了好一阵。直接用$.post上传文本信息肯定是没有问题的。但是$.post直接上传图片是不可行的。

处理文件上传:img_upload_process.php

<title>上传文件</title> 
 
<script> 
function CallbackFunction(str){ 
alert("上传成功"); 

竞技宝,</script> 
竞技宝app下载,<form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload"> 
 <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0  SCROLLING="no" style="display:NONE"></iframe> 
 <input id="test_file" name="test_file" type="file"> 
 <input value="上传文件" type="submit"> 
</form> 

后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的。flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大。

up{//上传成功 echo << window.parent.document.getElementById.src = "$save_path"; window.parent.document.getElementById.innerHTML = '上传成功'; window.parent.document.getElementById.value = "$save_path"; STR;}else{ $error = $upload->error(); echo << window.parent.document.getElementById.src = ""; window.parent.document.getElementById.innerHTML = "上传失败: $error"; STR;}

后台上传处理页面uploadfile.php,这段代码为简单的上传代码,没有进行错误及异常处理。上传代码执行完成后,要告诉父页面已经上传完毕了,因此,在这个页面里调用父页面的回调函数CallbackFunction,这个函数可以有参数,形式自己定义。

最后只好模拟iframe来实现。发现相当的简单。

文件上传工具类:Upload.class.php

竞技宝官网, 代码如下

<iframe name="ajaxUpload" style="display:none"></iframe>

path = $path; $this->max_size = 1000000; } /** * 文件上传的方法,分目录存放文件 * @access public * @param $file array 包含上传文件信息的数组 * @return mixed 成功返回上传的文件名,失败返回false */ public function up{ //判断文件是否是通过 HTTP POST 上传,防止恶意欺骗 /* if (! is_uploaded_file { $this->errno = 5; //设置错误信息号为5,表示非法上传 return false; } */ //判断是否从浏览器端成功上传到服务器端 if  { # 上传到临时文件夹成功,对临时文件进行处理 //上传类型判断 if (!in_array($file['type'], $this->mime)) { # 类型不对 $this->errno = -1; return false; } //判断文件大小 if ($file['size'] > $this->max_size) { # 大小超出配置文件的中的上传限制 $this->errno = -2; return false; } //获取存放上传文件的目录 $sub_path = date.'/'; if (!is_dir($this->path . $sub_path)) { # 不存在该目录,创建之 mkdir($this->path . $sub_path); } //文件重命名,由当前日期 + 随机数 + 后缀名 $file_name = date.strrchr; //准备就绪了,开始上传 if (move_uploaded_file($file['tmp_name'], $this->path . $sub_path . $file_name)) { # 移动成功 return $sub_path . $file_name; } else { # 移动失败 $this->errno = -3; return false; } } else { # 上传到临时文件夹失败,根据其错误号设置错误号 $this->errno = $file['error']; return false; } } /** * 多文件上传方法 * @access public * @param $file array 包含上传文件信息的数组,是一个二维数组 * @return array 成功返回上传的文件名构成的数组, ?如果有失败的则不太好处理了 */ public function multiUp{ //在多文件上传时,上传文件信息 又是一个多维数组,如$_FILES['userfile']['name'][0],$_FILES['userfile']['name'][1] //我们只需要遍历该数组,得到每个上传文件的信息,依次调用up方法即可 foreach ($files['name'] as $key => $value) { # code... $file['name'] = $files['name'][$key]; $file['type'] = $files['type'][$key]; $file['tmp_name'] = $files['tmp_name'][$key]; $file['error'] = $files['error'][$key]; $file['size'] = $files['size'][$key]; //调用up方法,完成上传 $filename[] = $this->up; } return $filename; } /** * 获取错误信息,根据错误号获取相应的错误提示 * @access public * @return string 返回错误信息 */ public function error(){ switch  { case -1: return '请检查你的文件类型,目前支持的类型有'.implode; break; case -2: return '文件超出系统规定的大小,最大不能超过'. $this->max_size; break; case -3: return '文件移动失败'; break; case 1: return '上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值,其大小为'.ini_get('upload_max_filesize'); break; case 2: return '上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值,其大小为' . $_POST['MAX_FILE_SIZE']; break; case 3: return '文件只有部分被上传'; break; case 4: return '没有文件被上传'; break; case 5: return '非法上传'; break; case 6: return '找不到临时文件夹'; break; case 7: return '文件写入临时文件夹失败'; break; default: return '未知错误,灵异事件'; break; } }}

<?php 
set_time_竞技宝客户端,limit(0); 
if($_SERVER[竞技宝手机版官网,'REQUEST_METHOD']=='POST') { 
  move_竞技宝官网dota2,uploaded_file($_FILES["test_file"]["tmp_name"], 
  dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]); 
  echo "<script>window.parent.CallbackFunction();</script>"; 

?>

<form name="from1" id="from1" method="post" action="url"  enctype="multipart/form-data" target="ajaxUpload">     这里是重点。要上传文件enctype这个属性不可少,target的值改为iframe的name的值。

处理表单提交:form_process.php

以上是用iframe实现无刷新上传文件的简单方法,想要健壮的程序的话需要再细化

<table>

点击表单提交按钮结果:代码下载:php表单文件iframe异步上传以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

例2

   <tr>

PHP利用iframe上传文件并返回值到父框架

      <td>附件:</td>

淡水其实也是采用这样的做发法的。正好看到有童鞋博客上有这样写。就顺手贴过来了。

      <td><input type="file" id="document" name="document"/></td> 

 代码如下

   </tr> 

if($result)    
{   
echo "上传成功!文件路径为:".$file2;   
echo '<input name="img" type="hidden" value="'.$file2.'" id="img"/>';   
echo'<script>parent.document.form1.img.value=document.getElementById("img").value;</script>';   
}

</table> 

文件上传成功后,把文件路径写入一个隐藏的域中(img),然后用DOM原理把隐藏域中的VALUE发送到父框架的表单form1的img文本框中:
ok,再来看看淡水的。
淡水编辑器用了tinyMCE,所以有一点点不一样。
我的form页:

</form>

 代码如下

 

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
    // O2k7 skin
    tinyMCE.init({
        // General options
        mode : "exact",
        elements : "content",
        theme : "advanced",
        skin : "o2k7",
        language : "zh",
        relative_urls : false,
//....略过部分...

上面是HTML

    });

下面写一下js代码,我是用的jQuery所以在用的时候载入jquery的库是必不可少的。

    function InsertHtml(type,path){

 $(function(){

        type=type.toLowerCase()

        if($.browser.msie){

        switch(type){
            case '.gif':
            thecode = '<img src="'+path+'" alt=""/>';
            break;
            case '.jpg':
            thecode = '<img src="'+path+'" alt=""/>';
            break;
//......略过部分......
            default :
            thecode = '<a href="'+path+'" target="_blank">Download</a>';
            break;
        }
        tinyMCE.execCommand('mceInsertContent',true,thecode);
    }
</script>

             window.form1.submit();}else{

iframe也就是在这个页面里了。
在我的iframe的提交给的php处理里:

             $("#form1").submit();}

 代码如下

       });

            $pasteJS = "<script type=text/javascript>n";
            $pasteJS .= "parent.InsertHtml("" . $file_ext . "","" . $upload_src . "");n";
            $pasteJS .= "</script>n";
            echo $pasteJS;

 //这里是做了一个浏览器版本的判断,因为IE是不太符合规范的一个浏览器,尤其是IE6。IE6是不直接支持$("#idName").submit();这种方式的。

于是上传的文件就跑到tinyMCE的编辑框里了。upload的文件路径也通过userdata会暂存起来,直到写入database。路径保存这块儿,也是在iframe的提交给的php处理文件里的,这里淡水就不多写了。

然后在服务端要怎么着呢,而且还得返回一个值,直接submit是无法返回值的

public void Upload()

{

    HttpPostedBase ff=Request.Files["document"];//这里是获取上传的文件流,也可以用索引值来表示如果是多个文件的话

   string fileName=System.DateTime.Now+ff.FileName.ToString();   //这里取出来的文件名是没有后缀的,所以要保存的话还需要取出文件拓展名。这里就不写过细,只是为描述这样一个思路。

版权声明:本文由龙竞技官网发布于龙竞技官网,转载请注明出处:ajax上传图片文件