单张图片上传预览【超简洁，未完待续】

http://www.cnblogs.com/ordinaryk/p/6277451.html

1.单张图片上传之前前端预览

<!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=utf-8" />
<title>无标题文档</title>
</head>
<form>
<input type="file" name="mingzi" id="pic"/>
<input id="tijiao" type="button"   value="提交">
</form>
<div id="tu" style=" width:200px; height:300px; background-color:#0FF; background-image:url(y1.png)"></div>
<body>
<script>
var y = document.getElementById("pic");//上传文件
var mi = 123;
var yi = document.getElementById("tu");//预览图片的div
var tijiao = document.getElementById("tijiao");
y.οnchange=function(){var wj = y.files[0];//获取文件信息(这里不能作为全局变量放在函数外面，因为再次运行该函数的时候函数外的是不运行的)
if(wj.size<200000)
{if(wj.type=='image/png')//判断文件类型{if( window.URL)//建立一個可存取到該file的url{var ul = window.URL.createObjectURL(wj);}else if(window.createObjectURL){var ul = window.createObjectURL(wj);}else if(window.webkitURL){var ul = window.webkitURL.createObjectURL(wj);}yi.style.backgroundImage="url("+ul+")";//这个地址和正常用的不太一样但是非常有效if(tijiao.getAttribute("disabled")=="disabled"){tijiao.removeAttribute("disabled");}}else{alert("文件格式不正确");if(tijiao.getAttribute("disabled")!="disabled"){tijiao.setAttribute("disabled","disabled");}}
}
else
{alert("文件太大");if(tijiao.getAttribute("disabled")!="disabled"){tijiao.setAttribute("disabled","disabled");}
}
}
</script>
</body>
</html>

处理界面：

<?php
include("DBDA.class.php");
$mingzi = $_FILES['mingzi'];
var_dump($mingzi);
$lujing = "./pic/".date("YmdHis").$mingzi["name"];//创建路径（这里可以给原图片改名）
move_uploaded_file($mingzi["tmp_name"], $lujing);//把图片储存到创建的路径下面
$db = new DBDA();
$str = "insert into tupian values('','我','{$lujing}')";//图片存到数据库
$db->Query($str,0);
//显示数据库的图片
$stb = "select * from tupian";
$shuzu = $db ->Query($stb);
foreach($shuzu as $v)
{echo "<img src='{$v[2]}'/>";
}
?>

　DBDA封装类

<?php
class DBDA
{public $host="localhost";public $uid = "root";public $pwd = "123";public $dbname = "test";//成员方法public function Query($sql,$type=1){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$r = $db->query($sql);if($type==1){return $r->fetch_all();}else{return $r;}}//返回字符串的方法public function StrQuery($sql,$type=1){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$r = $db->query($sql);if($type==1){$attr = $r->fetch_all();$str = "";foreach($attr as $v){$str .= implode("^",$v)."|";}return substr($str,0,strlen($str)-1);}else{return $r;}}//返回JSONfunction JSONQuery($sql,$type=1){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$r = $db->query($sql);if($type==1){return json_encode($r->fetch_all(MYSQLI_ASSOC));}else{return $r;}}function JSONAQuery($sql,$type=1){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$r = $db->query($sql);if($type==1){return json_encode($r->fetch_all());}else{return $r;}}}

DBDA.class.php

JQ 方法：

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple /><br><img src="" id="img0" >
</form>
<script>
$("#file0").change(function(){var objUrl = getObjectURL(this.files[0]) ;console.log("objUrl = "+objUrl) ;if (objUrl) {$("#img0").attr("src", objUrl) ;}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {var url = null ; if (window.createObjectURL!=undefined) { // basicurl = window.createObjectURL(file) ;} else if (window.URL!=undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file) ;} else if (window.webkitURL!=undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file) ;}return url ;
}
</script>
</body>
</html>

ＪＱ

转载于:https://www.cnblogs.com/ordinaryk/p/6506740.html

单张图片上传预览【超简洁，未完待续】相关推荐

二十七、单张图片上传预览
html部分 <div class="new-store-phone"> <span class="phone-title">营 ...
html单张图片效果,jquery+html5实现单张图片上传预览
js: if (window.File && window.FileReader && window.FileList && window.Blob){ ...
简单快捷的实现图片上传预览效果
简单快捷的实现图片上传预览效果如何简单快捷的实现图片上传预览效果,想必这是绝大多数的c#新手遇到的一个小难题. 我学习c#也有一年的时间了,就把一个简单的方法给大家看看. 如下: readAsDat ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...

单张图片上传预览【超简洁，未完待续】

单张图片上传预览【超简洁，未完待续】相关推荐

最新文章

热门文章