仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1688|回复: 19
打印 上一主题 下一主题

[学习教程] PHP网页编程之JavaScript图片上传前预览和限制图片格...

[复制链接]
活着的死人 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-2-4 00:13:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在学习中,我也一直这样要求着自己。javascript|上传   这是一则PHP图片上传的例子,这里想申明的是在上传图片前,当用户从当地或是近程选择图片时可以预览图片,因为上传的图片有大有小,宽窄纷歧,上传后咱们都将对图片停止扩充处置,然而在上传前用户可否晓得扩充后的后果呢?并且可否在提交前就告知用户哪些图片格局是无效的呢?谜底是一定的,本例就是一个上载图片前预览图片,并按比例紧缩的实践例子,代码很复杂,次要是创立一个new Image(),然后给这个给这个image写入要显示的中央,而图片格局是不是无效,是经由过程文件上的后缀来判别的,js里没有直接验证文件的格局的函数,需求经由过程substring()文件名最初一个.来判别。
本例后果固然能完成,但在预览时仍有两个成绩要注重
1,在Opera下,因为得不到上传框里的当地图片全体途径(只能失掉文件名),所以没法预览图片。
2,用Firefox近程会见本文件时,出于平安缘由,ff不答应预览当地的图片,在当地则可以。
注:这些在IE下均没有这些成绩。
以下是本例的全体代码:
<html>
<head>
<title>上载文件表单</title></head>
<style>
#con { background-color:#c1c1c1}
#t{width:100px;float:left;clear:both;}
#con li{display:inline;}
#perDiv{position:absolute;width:210px;left:420px;height:210px;background-color:;align:center}
</style>
<body>
upload example for php by jarry!
<form enctype="multipart/form-data" action="upload.php" name="uploadform" method="post">

<div id="perDiv" style="display:">
<br><br>这里是用来预览图片用
</div>

<div id="con">
<div id=t>请选择文件:</div>
<li><input name="upload_file" type="file" size="30" >(将近程图片的url粘贴出去也能够)</li><br>
<font size=-1>只承受后缀名为".gif",".jpg",".jpeg","png","bmp"的文件! </font><br>
<div id=t>称号:</div>

<li><input type=text value="11" size="30" name="name"></li><br>
<div id=t>描写:</div>
<li><textarea rows="5" cols="30" name="description">11</textarea></li><br>
<div id=t>上传人:</div>
<li><input type="text" value="11" size="40" name="uploader"></li><br>

<div id=t> </div><input type="submit" value="上传文件">  <a href="showimg.php">检查图片</a><br>
</div>
<div id="divinfo"><br></div>
</form>
<br clear="both">
<b><a href="showimg.php">检查上传图片列表</a></b><br>
<script type="text/javascript">

function selectFile(obj1,obj2){
    var filepath = obj1.value;
    if(filepath.lastIndexOf("\\")>0){
         filename= filepath.substring(filepath.lastIndexOf("\\")+1,filepath.length);
    }
    obj2.value = filename;//用来失掉文件名;
}
var re;
var tempimg=new Image();//构建一个image对象,用光降时存取上传的图片信息
function perImg(o)
{//o是阅读上传的值;

isOpare=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1)?true:false;
if(isOpare && o.indexOf("http://")==-1){document.getElementById("perDiv").innerHTML="Opera 阅读器失掉不当地途径,所以没法供应预览后果,感谢!";return;}

    //tempimg.src="http://www.pushad.com/XrssFile/2007-2/6/20072612928765.gif";
    //tempimg.src=o;//return;
    //近程会见时阅读当地的图片时由于平安缘由而在firefox下能预览,
    //ie下都没有成绩:(,翻开静态页面时也没有成绩;
    //可以把在线的图片url拷贝至文件框试一试,拷贝出去的一概无效,(地址为http://的)在其它阅读器下均无效
    //而假如是firefox假如是经由过程近程会见,选择图片时没法预览当地的图片
    //这可以说是firefox为平安思索的一个方面,也能够说是firefox下的bug
    //而关于opera来说,只需是从当地选择的图片(不论是当地仍是近程会见本文件),都得不到全体的途径,所以opera下是没法预览当地图片的
    //假如是近程的图片地址,粘贴进文件框里(地址为http://的),就都可以预览图片了。
   
if(o!=""){
// o=encodeURIComponent(o);
   if(o.indexOf("file:///")==-1 && o.indexOf("http://")==-1)o="file:///"+o;
   //给url加上file,这类体例在非windows平台能够会有成绩;
   o=o.replace(/\\/g,"/");
   tempimg.src=o;
   //alert(o+"||"+tempimg.width+"||"+tempimg.height);
   clearTimeout(re);
   re=setTimeout("resize(tempimg)",100);
   //设置100毫秒的迟延便可处理ff下失掉前一次size的成绩;
}
}

function resize(o){
//预览时若图片宽或宏伟于200*200,则设定宽或高最大为200*200;
//上传后再用java/php/c等裁剪生成巨细两张图片;
  ow=o.width;
  oh=o.height;
  var ow2=ow,oh2=oh;//失掉宽高
  //alert("ow:"+ow+"oh:"+oh+"\now2:"+ow2+"oh2"+oh2)
  try{
  if(ow>oh){//如严惩于高且严惩于200就减少宽为200,高则按比例缩放
      if(ow>200){ow2=200;oh2="auto";}
  }else{//如宏伟于宽且宏伟于200就减少高为200,宽则按比例缩放
      if(oh>200){oh2=200;ow2="auto";}
  }
          var showdiv=document.getElementById("divinfo");
          var info="原宽:"+ow+" || 原高:"+oh+" == "+"改后宽:"+ow2+" || 改后高:"+oh2;
          var getimg="<a href=\""+o.src+"\" onclick=\"window.open(this.href,'','width=500,height=400,top='+(window.screen.height-500)/2+',left='+(window.screen.width-500)/2+',resizable=yes ');return false;\" target=\"_blank\">"
                                +"<img border=\"0\" id=\"uploadimg\" src=\""+o.src+"\" style=\"width:"+ow2+";height:"+oh2+";\">"
                                +"</a>";
          document.getElementById("perDiv").innerHTML=getimg;
          if(showdiv)showdiv.innerHTML=info;           
  }catch(ex){
     alert(ex.toString());
  }  

}
//jiarry.126.com
//differentiate file type

var right_type=new Array(".gif",".jpg",".jpeg","png","bmp")
function checkImgType(fileURL)
{
//本法式用来验证后缀,假如还有其它格局,可以添加在right_type;
var right_typeLen=right_type.length;
var imgUrl=fileURL.toLowerCase();
var postfixLen=imgUrl.length;
var len4=imgUrl.substring(postfixLen-4,postfixLen);
var len5=imgUrl.substring(postfixLen-5,postfixLen);
for (i=0;i<right_typeLen;i++)
{
    if((len4==right_type)||(len5==right_type))
    {
    return true;
    }
}
}


var xlist=0;var errStr="";
function sub(o){
   if(o.upload_file.value==""){xlist+=1;errStr+=xlist+")请选择一个图片文件\n";}
   if(o.name.value==""){xlist+=1;errStr+=xlist+")请输出称号\n";}
   if(o.description.value==""){ xlist+=1; errStr+=xlist+")请输出描写\n";}
   if(o.uploader.value==""){xlist+=1; errStr+=xlist+")请输出上传人\n";}   
   if(errStr!=""){
       alert(errStr);
       xlist=0;errStr="";
       return false;
   }
   if(checkImgType(o.upload_file.value)){
    perImg(o.upload_file.value);
    return true;
     //alert("选择图片准确,你上传的图片是"+o.upload_file.value);
     return false;
   }else{
   alert("您选择的文件格局不准确!");o.upload_file.focus();
   return false;
   }
}

</script>
</body>
</html>
<?
/*data*/
$conn=mysql_connect("localhost","root","")or die("毗连掉败!");
mysql_select_db("test",$conn);
/*data*/
$upload_file=$_FILES['upload_file']['tmp_name'];
$upload_file_name=$_FILES['upload_file']['name'];
if($upload_file){
$file_size_max = 1000*1000;// 1M限制文件上传最大容量(bytes)
$store_dir = "upimg/";// 上传文件的贮存地位
$accept_overwrite = 1;//是不是答应掩盖不异文件
// 反省文件巨细
if ($upload_file_size > $file_size_max) {
echo "对不起,你的文件容量大于划定";
exit;
}

// 反省读写文件
if (file_exists($store_dir . $upload_file_name) && !$accept_overwrite) {
Echo "存在不异文件名的文件";
exit;
}

//复制文件到指定目次
if (!move_uploaded_file($upload_file,$store_dir.$upload_file_name)) {
echo "复制文件掉败";
exit;
}

}

echo "<p>你上传了文件:";
echo $_FILES['upload_file']['name'];
echo "<br>";
//客户端机械文件的原称号。
Echo "文件的 MIME 类型为:";
echo $_FILES['upload_file']['type'];
//文件的 MIME 类型,需求阅读器供应该信息的撑持,例如“image/gif”。
echo "<br>";
Echo "上传文件巨细:";
echo $_FILES['upload_file']['size'];
//已上传文件的巨细,单元为字节。
echo "<br>";
Echo "文件上传后被一时贮存为:";
echo $_FILES['upload_file']['tmp_name'];
//文件被上传后在办事端贮存的一时文件名。
echo "<br>";
$name=$_FILES['upload_file']['name'];
$path=$_FILES['upload_file']['name'];
$type=$_FILES['upload_file']['type'];
$size=$_FILES['upload_file']['size'];
@ $desc=$_POST['description'];
@ $note=$_POST['uploader'];
@ $name=$_POST['name'];
/*insert database*/
if(!empty($name)){
$inserSql = mysql_query("insert into upimg (name,path,type,size,description,note) " .
        "values ('$name','$path','$type','$size','$desc','$note')");
//echo "a".$_POST['upload_file']."a";
}else{
//echo "b".$_POST['upload_file']."b";
}
$Erroe=$_FILES['upload_file']['error'];
echo "<font color=red>";
switch($Erroe){
case 0:
Echo "上传胜利";
break;
case 1:
Echo "上传的文件超越了 php.ini 中 upload_max_filesize 选项限制的值."; break;
case 2:
Echo "上传文件的巨细超越了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。"; break;
case 3:
Echo "文件只要局部被上传";break;
case 4:
Echo "没有文件被上传";break;
}
echo "</font>";
mysql_close($conn) or die("没法与办事器断开毗连!");
?>
本例下载地址(假如当地址非团体主机,不包管每次都能翻开或临时无效)
http://lslnx.zsu.edu.cn/webspace/78229/personel_web/jiarry/resources/previewImg.html


也得学会了PHP。然后再学,见异思迁是最不可取的,狗熊掰玉米就是这个道理,如果经常中途放弃,只能是一无所获,还浪费了N多的时间和经历,得不偿失,最重要的是,你会被别人瞧不起。
精灵巫婆 该用户已被删除
沙发
发表于 2015-2-4 10:03:28 | 只看该作者
做为1门年轻的语言,php一直很努力。
再见西城 该用户已被删除
板凳
发表于 2015-2-9 22:03:39 | 只看该作者
当留言板完成的时候,下步可以把做1个单人的blog程序,做为目标,
只想知道 该用户已被删除
地板
发表于 2015-2-10 06:52:31 | 只看该作者
我学习了一段时间后,我发现效果并不好(估计是我自身的问题)。因为一个人的精力总是有限的,同时学习这么多,会导致每个的学习时间都得不到保证。
老尸 该用户已被删除
5#
发表于 2015-2-21 11:09:08 | 只看该作者
不禁又想起那些说php是草根语言的人,为什么认得差距这么大呢。
活着的死人 该用户已被删除
6#
 楼主| 发表于 2015-3-5 20:48:39 | 只看该作者
找到的的资料很多都是在论坛里的,需要注册,所以我一般没到一个论坛都注册一个id,所有的id都注册成一样的,这样下次再进来的时候就不用重复注册啦。当然有些论坛的某些资料是需要的付费的。
柔情似水 该用户已被删除
7#
发表于 2015-3-12 14:55:14 | 只看该作者
其实没啥难的,多练习,练习写程序,真正的实践比看100遍都有用。不过要熟悉引擎
8#
发表于 2015-3-13 07:09:42 | 只看该作者
学习php的目的往往是为了开发动态网站,phper就业的要求也涵盖了很多。我大致总结为:精通php和mysql
不帅 该用户已被删除
9#
发表于 2015-3-20 16:25:33 | 只看该作者
遇到出错的时候,我经常把错误信息直接复制到 google的搜索栏,一般情况都是能搜到结果的,不过有时候会搜出来一大片英文的出来,这时候就得过滤一下,吧中文的弄出来,挨着式方法。
因胸联盟 该用户已被删除
10#
发表于 2015-3-31 02:36:08 | 只看该作者
说php的话,首先得提一下数组,开始的时候我是最烦数组的,总是被弄的晕头转向,不过后来呢,我觉得数组里php里最强大的存储方法,所以建议新手们要学好数组。
愤怒的大鸟 该用户已被删除
11#
发表于 2015-4-15 03:07:57 | 只看该作者
学好程序语言,多些才是王道,写两个小时代码的作用绝对超过看一天书,这个我是深有体会(顺便还能练打字速度)。
分手快乐 该用户已被删除
12#
发表于 2015-4-23 11:24:21 | 只看该作者
Apache不是非得用80或者8080端口的,我刚开始安得时候就是80端口老占用,就用了个 81端口,结果照常,就是输localhost的时候,应该输入为 localhost:81
谁可相欹 该用户已被删除
13#
发表于 2015-4-23 18:38:39 | 只看该作者
php是动态网站开发的优秀语言,在学习的时候万万不能冒进。在系统的学习前,我认为不应该只是追求实现某种效果,因为即使你复制他人的代码调试成功,实现了你所期望的效果,你也不了解其中的原理。
小女巫 该用户已被删除
14#
发表于 2015-5-1 08:01:03 | 只看该作者
如果你可以写完像留言板这样的程序,那么你可以去一些别人的代码了,
再现理想 该用户已被删除
15#
发表于 2015-6-8 18:12:36 | 只看该作者
首先我是坚决反对新手上来就用框架的,因为对底层的东西一点都不了解,造成知识上的真空,会对以后的发展不利。我的观点上手了解下框架就好,代码还是手写。当然啦如果是位别的编程语言的高手的话,这个就另当别论啦。
海妖 该用户已被删除
16#
发表于 2015-6-9 13:14:47 | 只看该作者
遇到出错的时候,我经常把错误信息直接复制到 google的搜索栏,一般情况都是能搜到结果的,不过有时候会搜出来一大片英文的出来,这时候就得过滤一下,吧中文的弄出来,挨着式方法。
飘飘悠悠 该用户已被删除
17#
发表于 2015-6-12 05:03:02 | 只看该作者
兴趣是最好的老师,百度是最好的词典。
莫相离 该用户已被删除
18#
发表于 2015-6-23 21:01:01 | 只看该作者
先学习php和mysql,还有css(html语言很简单)我认为现在的效果比以前的方法好。
透明 该用户已被删除
19#
发表于 2015-6-26 07:41:23 | 只看该作者
我要在声明一下:我是个菜鸟!!我对php这门优秀的语言也是知之甚少。但是我要在这里说一下php在网站开发中最常用的几个功能:
若天明 该用户已被删除
20#
发表于 2015-7-1 16:42:53 | 只看该作者
在我安装pear包的时候老是提示,缺少某某文件,才发现 那群extension 的排列是应该有一点的顺序,而我安装的版本的排序不是正常的排序。没办法我只好把那群冒号加了上去,只留下我需要使用的扩展。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-30 00:03

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表