Heim > php教程 > php手册 > Ajax & PHP 边学边练 之五 图片处理

Ajax & PHP 边学边练 之五 图片处理

WBOY
Freigeben: 2016-06-06 19:46:40
Original
1114 Leute haben es durchsucht

在中讲解了如何通过Ajax提交表单并由PHP处理底层数据,本篇将主要介绍图片的上传与处理。对于文件的上传很简单,只需一个Form便可实现,再通过PHP将源文件上传到目标目录。先上个效果图: Sample6_1.php 中创建Form: //显示上传状态和图片 div id= showimg

       在中讲解了如何通过Ajax提交表单并由PHP处理底层数据,本篇将主要介绍图片的上传与处理。对于文件的上传很简单,只需一个Form便可实现,再通过PHP将源文件上传到目标目录。先上个效果图:

Ajax & PHP 边学边练 之五 图片处理

Sample6_1.php 中创建Form:

<span>//显示上传状态和图片</span>
<div id="<span>showimg</span>"></div>
<span>//上传文件需要定义enctype,为了显示图片将target设为uploadframe</span>
Nach dem Login kopieren
Upload a File:
name="myfile" /> //上传文件 onclick="uploadimg(document.getElementById('uploadform')); return false;" />

 

上传图片函数 uploadimg:

<span>function</span> uploadimg(theform){
 <span>//提交Form</span>
 theform.submit();
 <span>//在showimg <div>中显示上传状态
 setStatus ("<span>Loading...</span>","<span>showimg</span>");
}
<span>//上传状态函数</span>
<span>function</span> setStatus (theStatus, theObj){
 obj = <span>document</span>.getElementById(theObj);
 <span>if</span> (obj){
  obj.innerHTML = "<span><div class='\"bold\"'>" + theStatus + "<span></span>
</div></span>";
 }
}

<p> </p>

<p>process_upload.php 提供文件上传功能:</p>

<pre class="brush:php;toolbar:false"><span></span>php
<span>//提供图片类型校验</span>
$allowedtypes = array("<span>image/jpeg</span>","<span>image/pjpeg</span>","<span>image/png</span>",<br>                      "<span>image/x-png</span>","<span>image/gif</span>");
<span>//文件存放目录</span>
$savefolder = "<span>images</span>";

<span>//如果有文件上传就开始干活</span>
if (isset ($_FILES['<span>myfile</span>'])){
  <span>//检查上传文件是否符合$allowedtypes类型</span>
  if (in_array($_FILES['<span>myfile</span>']['<span>type</span>'],$allowedtypes)){
    if ($_FILES['<span>myfile</span>']['<span>error</span>'] == 0){
      $thefile = "<span>$savefolder/</span>".$_FILES['<span>myfile</span>']['<span>name</span>'];
      <span>//通过move_uploaded_file上传文件</span>
      if (!move_uploaded_file($_FILES['<span>myfile</span>']['<span>tmp_name</span>'], $thefile)){
        echo "<span>There was an error uploading the file.</span>";
      }
      else{
<span>?></span>
<span>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<span>></span>
<span><span>html</span> <span>xmlns</span>=<span>"http://www.w3.org/1999/xhtml"</span><span>></span>
<span><span>head</span><span>></span>
<span><span>script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"functions.js"</span><span>></span><span></span><span>script</span><span>></span>
<span></span><span>head</span><span>></span>
<span><span>body</span><span>></span>
  <span><!-- 显示图片 --></span>
  <span><span>img</span> <span>src</span>=<span>"<?php echo $thefile; ?>"</span> <br>       <span>onload</span>=<span>"doneloading(parent,'<?php echo $thefile; ?>')"</span> <span>/></span>
<span></span><span>body</span><span>></span>
<span></span><span>html</span><span>></span>
<span></span>php
          }
      }
  }
}
<span>?></span></span></span></span></span></span></span>
Nach dem Login kopieren

 

       上面代码最后部分的doneloading 函数就是用来显示图片及修改图片尺寸大小。其中会用到thumb.php,它会在images目录中生成出源图片的大、中、小三个尺寸,有兴趣可以研究一下。欢迎大家拍砖~

 

源代码下载

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage