js 可增加删除图片上传框js代码
js 可增加删除图片上传框js代码
本款程序可以检测用户上传图片类型,大小,在上传之前,同时也可以增加多文件上传,就是不定文件多少,仿51空间那种文件上代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片预览效果</title>
<script src="CJL.0.1.min.js"></script>
<script src="QuickUpload.js"></script>
<script >
var ImagePreview = function(file, img, options) {
this.file = $$(file);//文件对象
this.img = $$(img);//预览图片对象
this._preload = null;//预载图片对象
this._data = "";//图像数据
this._upload = null;//remote模式使用的上传文件对象
var opt = this._setOptions(options);
this.action = opt.action;
this.timeout = opt.timeout;
this.ratio = opt.ratio;
this.maxWidth = opt.maxWidth;
this.maxHeight = opt.maxHeight;
this.onCheck = opt.onCheck;
this.onShow = opt.onShow;
this.onErr = opt.onErr;
//设置数据获取程序
this._getData = this._getDataFun(opt.mode);
//设置预览显示程序
this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;
};
//根据浏览器获取模式
ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
$$B.firefox ? "domfile" :
$$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";
//透明图片
ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?
"mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
ImagePreview.prototype = {
//设置默认属性
_setOptions: function(options) {
this.options = {//默认值
mode: ImagePreview.MODE,//预览模式
ratio: 0,//自定义比例
maxWidth: 0,//缩略图宽度
maxHeight: 0,//缩略图高度
onCheck: function(){},//预览检测时执行
onShow: function(){},//预览图片时执行
onErr: function(){},//预览错误时执行
//以下在remote模式时有效
action: undefined,//设置action
timeout: 0//设置超时(0为不设置)
};
return $$.extend(this.options, options || {});
},
//开始预览
preview: function() {
if ( this.file && false !== this.onCheck() ) {
this._preview( this._getData() );
}
},
//根据mode返回数据获取程序
_getDataFun: function(mode) {
switch (mode) {
case "filter" :
return this._filterData;
case "domfile" :
return this._domfileData;
case "remote" :
return this._remoteData;
case "simple" :
default :
return this._simpleData;
}
},
//滤镜数据获取程序
_filterData: function() {
this.file.select();
try{
return document.selection.createRange().text;
} finally { document.selection.empty(); }
},
//domfile数据获取程序
_domfileData: function() {
return this.file.files[0].getAsDataURL();
},
//远程数据获取程序
_remoteData: function() {
this._setUpload();
this._upload && this._upload.upload();
},
//一般数据获取程序
_simpleData: function() {
return this.file.value;
},
//设置remote模式的上传文件对象
_setUpload: function() {
if ( !this._upload && this.action !== undefined && typeof QuickUpload === "function" ) {
var oThis = this;
this._upload = new QuickUpload(this.file, {
onReady: function(){
this.action = oThis.action; this.timeout = oThis.timeout;
var parameter = this.parameter;
parameter.ratio = oThis.ratio;
parameter.width = oThis.maxWidth;
parameter.height = oThis.maxHeight;
},
onFinish: function(iframe){
try{
oThis._preview( iframe.contentWindow.document.body.innerHTML );
}catch(e){ oThis._error("remote error"); }
},
onTimeout: function(){ oThis._error("timeout error"); }
});
}
},
//预览程序
_preview: function(data) {
//空值或相同的值不执行显示
if ( !!data && data !== this._data ) {
this._data = data; this._show();
}
},
//设置一般预载图片对象
_simplePreload: function() {
if ( !this._preload ) {
var preload = this._preload = new Image(), oThis = this;
preload.onload = function(){ oThis._imgShow( oThis._data, this.width, this.height ); };
preload.onerror = function(){ oThis._error(); };
}
},
//一般显示
_simpleShow: function() {
this._simplePreload();
this._preload.src = this._data;
},
//设置滤镜预载图片对象
_filterPreload: function() {
if ( !this._preload ) {
var preload = this._preload = document.createElement("div");
//隐藏并设置滤镜
$$D.setStyle( preload, {
width: "1px", height: "1px",
visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
//插入body
var body = document.body; body.insertBefore( preload, body.childNodes[0] );
}
},
//滤镜显示
_filterShow: function() {
this._filterPreload();
var preload = this._preload,
data = this._data.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });
try{
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
}catch(e){ this._error("filter error"); return; }
//设置滤镜并显示
this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + data + "")";
this._imgShow( ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight );
},
//显示预览
_imgShow: function(src, width, height) {
var img = this.img, style = img.style,
ratio = Math.max( 0, this.ratio ) || Math.min( 1,
Math.max( 0, this.maxWidth ) / width || 1,
Math.max( 0, this.maxHeight ) / height || 1
);
//设置预览尺寸
style.width = Math.round( width * ratio ) + "px";
style.height = Math.round( height * ratio ) + "px";
//设置src
img.src = src;
this.onShow();
},
//销毁程序
dispose: function() {
//销毁上传文件对象
if ( this._upload ) {
this._upload.dispose(); this._upload = null;
}
//销毁预载图片对象
if ( this._preload ) {
var preload = this._preload, parent = preload.parentNode;
this._preload = preload.onload = preload.onerror = null;
parent && parent.removeChild(preload);
}
//销毁相关对象
this.file = this.img = null;
},
//出错
_error: function(err) {
this.onErr(err);
}
}
</script>
</head>
<body>
<style>
.perview {width:600px;background:#fff;font-size:12px; border-collapse:collapse;}
.perview td, .perview th {padding:5px;border:1px solid #ccc;}
.perview th {background-color:#f0f0f0; height:20px;}
.perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00F;}
.perview table{ width:100%;border-collapse:collapse;}
</style>
<table border="0" class="perview">
<tr>
<th>选择文件</th>
<th width="50%">预览图</th>
</tr>
<tr>
<td height="200"><input id="idFile" name="pic" type="file" /></td>
<td align="center"><img id="idImg" /></td>
</tr>
</tbody>
</table>
<script>
var ip = new ImagePreview( $$("idFile"), $$("idImg"), {
maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
});
ip.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ ip.preview(); };
</script>
<br />
<style>
/*file样式*/
#idPicFile {
width:80px;height:20px;overflow:hidden;position:relative;
background:url(http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat;
}
#idPicFile input {
font-size:20px;cursor:pointer;
position:absolute;right:0;bottom:0;
filter:alpha(opacity=0);opacity:0;
outline:none;hide-focus:expression(this.hideFocus=true);
}
</style>
<table class="perview">
<tr>
<th align="right"> 选择图片: </th>
<td width="75%"> <div id="idPicFile"> </div> </td>
</tr>
<tr>
<td colspan="2"><table>
<thead>
<tr>
<th> 文件路径 </th>
<th width="30%"> 预览图 </th>
<th width="20%"> 操作 </th>
</tr>
</thead>
<tbody id="idPicList">
<tr>
<td></td>
<td align="center"></td>
<td align="center"><a href="#">移除</a></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<script>
var table = $$("idPicList"), model = table.removeChild(table.rows[0]);
function AddPreview(){
var file = document.createElement("input"),
img = document.createElement("img"),
ip = new ImagePreview( file, img, {
maxWidth: 150,
maxHeight: 100,
action: "ImagePreview.ashx",
onErr: function(){ alert("载入预览出错!"); ResetFile(file); },
onCheck: CheckPreview,
onShow: ShowPreview
});
file.type = "file"; file.name = "pic";
file.onchange = function(){ ip.preview(); };
$$("idPicFile").appendChild(file);
}
//检测程序
var exts = "jpg|gif|bmp", paths = "|";
function CheckPreview(){
var value = this.file.value, check = true;
if ( !value ) {
check = false; alert("请先选择文件!");
} else if ( !RegExp( ".(?:" + exts + ")$$", "i" ).test(value) ) {
check = false; alert("只能上传以下类型:" + exts);
} else if ( paths.indexOf( "|" + value + "|" ) >= 0 ) {
check = false; alert("已经有相同文件!");
}
check || ResetFile(this.file);
return check;
}
//显示预览
function ShowPreview(){
var row = table.appendChild(model.cloneNode(true)),
file = this.file, value = file.value, oThis = this;
row.appendChild(file).style.display = "none";
row.cells[0].innerHTML = value;
row.cells[1].appendChild(this.img);
row.getElementsByTagName("a")[0].onclick = function(){
oThis.dispose(); table.removeChild(row);
paths = paths.replace(value, ""); return false;
};
paths += value + "|";
AddPreview();
}
AddPreview();
function ResetFile(file){
file.value = "";//ff chrome safari
if ( file.value ) {
if ( $$B.ie ) {//ie
with(file.parentNode.insertBefore(document.createElement('form'), file)){
appendChild(file); reset(); removeNode(false);
}
} else {//opera
file.type = "text"; file.type = "file";
}
}
}
</script>
</body>
</html>
本网站提供站长工具,alexa信息查询,alexa详细查询,alexa信息查询工具,alexa详细查询工具等信息,
查询地址:http://alexa.111cn.net/
查询效果
站点名称 | zhong guo W E B di yi zhan | 收录日期 | 网站语言 | zh-CN | |
网站域名 | 111cn.net | 编码方式 | gb2312 | 网站站长 | dengxianhong |
综合排名 | 19,413 | 访问速度 | 817毫秒,比88%的网站快! | 电子信箱 | mailangel123@163.com |
排名变化 | -19,468 | 反向链接 | 87个 | 联系电话 | |
详细地址 | China Chang Sha shi, Hunan 410001 Hu Nan chang sha , Chang Sha shi, Hunan 410001 | ||||
网站简介 | |||||
DMOZ目录 |
当日排名 | 排名变化趋势 | 一周平均排名 | 排名变化趋势 | 一月平均排名 | 排名变化趋势 | 三月平均排名 | 排名变化趋势 |
83,889 | +72,872 | 13,155 | -2,023 | 14,974 | -2,618 | 19,413 | -19,468 |
日均 IP 访问量 | ≈90,000 | 日均 PV 浏览量 | ≈144,000 |
Reach 到访量 |
Pageviews 页面浏览量 |
Pageviews/User 每位访客浏览页数 |
Bounce % 跳出率 |
Time on Site 平均停留时间 |
Search % 流量源自搜索 引擎所占比例 |
|||||||
昨天 | 0.003 | -80% | 0.00003 | -90% | 1 | -50% | - | - | - | - | - | - |
一周 | 0.015 | +7% | 0.00025 | +16% | 1.6 | +8% | 74.6 | +13% | 100.3 | -2% | 48.6 | -6% |
一月 | 0.0135 | +20% | 0.000196 | +20% | 1.43 | -0.7% | 72.2 | 0% | 94.7 | 0% | 49.7 | +4% |
三月 | 0.0099 | +149% | 0.000154 | +118% | 1.43 | -12% | 73.2 | +22% | 93.4 | -26% | 48.4 | +21% |
其他国家/地区排名 | 访问国家/地区比 | |
|
|
下属站点被访问比例 | 该站本月热门关键词 | 该站热门关键词 | ||
111cn.net:
|
|
|
两 年数据 | 六个月数据 | 三个月数据 | 一个月数据 | 一星期数据 |
php 入门型-文件上传代码
<?php
if(!empty($_FILES["uploadImage"])) {
// get file name
$filename = basename($_FILES['uploadImage']['name']);
// get extension
$ext = substr($filename, strrpos($filename, '.') + 1);
// check for jpg only
if ($ext == "jpg") {
// generate unique file name
$newName = 'images/'.time().'.'.$ext;
// upload files
if ((move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName))) {
// get height and width for image uploaded
list($width, $height) = getimagesize($newName);
// return json data
echo '{"image" : "'.$newName.'", "height" : "'.$height.'", "width" : "'.$width.'" }';
}
else {
echo '{"error" : "An error occurred while moving the files"}';
}
}
else {
echo '{"error" : "Invalid image format"}';
}
}
?>
ajax 级联动菜单代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax2级联动菜单演示</title>
<script language="javascript">
var http_request=false;
function send_request(url){//初始化,指定处理函数,发送请求的函数
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//设置MIME类别
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//异常,创建对象实例失败
window.alert("创建XMLHttp对象失败!");
return false;
}
http_request.onreadystatechange=processrequest;
//确定发送请求方式,URL,及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processrequest(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已成功返回,开始处理信息
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{//页面不正常
alert("您所请求的页面不正常!");
}
}
}
function getclass(obj){
var pid=document.form1.select1.value;
document.getElementById(obj).innerHTML="<option>loading...</option>";
send_request('doclass.php?pid='+pid);
reobj=obj;
}
</script>
</head>
<body>
<form name="form1">
<select name="select1" id="class1" style="width:100;" onChange="getclass('class2');">
<option selected="selected"></option>
<option value="1">大类1</option>
<option value="2">大类2</option>
</select>
<select name="select2"id="class2" style="width:100;">
</select>
</form>
<?php
header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码
$pid=$_GET['pid'];
$db=mysql_connect("localhost","root","7529639"); //创建数据库连接
mysql_query("set names 'GBK'");
mysql_select_db("menuclass");
$sql="select classname from menu where parentid=".$pid."";
$result=mysql_query($sql);
//循环列出选项
while($rows=mysql_fetch_array($result)){
echo '<option>';
echo $rows['classname'];
echo "</option>n";
}
?>
</body>
</html>
Ffmpeg
得到文件
下载好之后首先就是配置一下环境变量
我下载的放在了D盘跟目录
D:oracleproduct10.2.0client_1bin;D:oracleproduct10.2.0db_1bin;%SystemRoot%system32;%SystemRoot%;%SystemRoot%System32Wbem;C:Program FilesJavajdk1.7.0bin;C:Program FilesATI TechnologiesATI.ACECore-Static;C:Program FilesCommon FilesThunder NetworkKanKanCodecs;D:Program FilesTortoiseSVNbin;C:Program FilesMicrosoft SQL Server90Toolsbinn;D:ffmpeg
配的有点多,最后那个就是我的ffmpeg
配置好之后就先在Dos中测试下
打开Dos界面 输入 ffmpeg
如果成功的话会显示好多的命令
如果失败则显示 你输入的不是内部命令之类的。
如果失败就看看自己的环境变量是否配置OK
OK之后先在Dos下测试是否能成功转换
首先在一个目录放入一个视频
我在D盘跟目录放入了Demo.avi 视频,我将要转换为Flv
输入命令:ffmpeg -i D:/Demo.avi D:/Demo..flv
-i 后面紧跟的是要转换的文件地址 在后是你要把文件转换到哪里以及相对应的文件名和格式
输入命令之后回车,看看相对应的目录是否出现了你需要的转换后的文件。
如果失败检查命令是否错误。
PHP中执行转换的命令
//转换为Flv
function makeFlv($video_file,$flv_file)
{
//判断给定的文件是否正常
if(!is_file($video_file)){
return false;
}
global $flv_msg;
$flv_cmd="ffmpeg -i ".$video_file." ".$flv_file;
exec($flv_cmd,$flv_msg);
}
//创建flv视频的图片
function makeFlvPic($flv_file,$flv_pic_file)
{
global $flv_msg;
$flv_pic_cmd="ffmpeg -i ".$flv_file.
" -y -f image2 ".
" -ss 1 ".
" -t 0.001 ".
" -s 350x240 ".$flv_pic_file;
exec($flv_pic_cmd,$flv_msg);
}
相关文章
- 下面小编来给大家演示几个php操作zip文件的实例,我们可以读取zip包中指定文件与删除zip包中指定文件,下面来给大这介绍一下。 从zip压缩文件中提取文件 代...2016-11-25
- 复制代码 代码如下: <td> <a href="/member/life/edit_ppt/<?php echo $v->id;?>" class="btn">编辑</a> <a href="javascript:;" onclick="if(confirm('您确定删除这条记录?')){location.href='/member/life/d...2014-06-07
- 伪造跨站请求介绍伪造跨站请求比较难以防范,而且危害巨大,攻击者可以通过这种方式恶作剧,发spam信息,删除数据等等。...2013-10-01
Centos中彻底删除Mysql(rpm、yum安装的情况)
我用的centos6,mysql让我整出了各种问题,我想重装一个全新的mysql,yum remove mysql-server mysql之后再install并不能得到一个干净的mysql,原来的/etc/my.cnf依然没变,datadir里面的数据已没有任何变化,手动删除/etc/my.cn...2015-03-15- 数据库中的数据删除会分为两种:物理删除 和 逻辑删除,接下来通过本文给大家介绍MyBatis-Plus的物理删除和逻辑删除使用场景分析,感兴趣的朋友一起看看吧...2021-09-25
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 本文介绍了如何延迟javascript代码的加载,加快网页的访问速度。 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点...2013-10-13
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了mybatis-plus getOne和逻辑删除,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-26
- 这篇文章主要介绍了C# 复制与删除文件的实现方法的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下...2020-06-25
- 最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-11-12
- 这篇文章主要介绍了MybatisPlus实现逻辑删除功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-25
- 这篇文章主要介绍了C++递归删除一个目录的实现方法,涉及到目录的操作及递归算法的应用,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了jQuery中DOM节点的删除方法,文中介绍的很相信,内容包括empty()的基本用法、remove()的有参用法和无参用法、empty和remove区别、保留数据的删除操作detach()以及detach()和remove()区别,需要的朋友可以参考借鉴。...2017-01-26
- 本文实例讲述了MySQL查看、创建和删除索引的方法。分享给大家供大家参考。具体如下:1.索引作用在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率。特别是当数据量非常大,查询...2015-10-21
- 在本篇文章里小编给大家分享了关于C#删除Excel中的图片的实例代码内容,有兴趣的朋友们参考学习下。...2020-06-25
- 这篇文章主要介绍了mysql delete 多表连接删除功能的相关资料,需要的朋友可以参考下...2017-03-14