html5图片上传控件
① html5如何上传图片到服务器
直接用ftp工具,将你.html或者.htm结尾的文件放到服务器的运行目录
然后通过你的网站/html名字.html。
② html5文件上传控件的button样式怎么修改
直接写
CSS样式
是不行的
<input
type="text"
size="20"
name="upfile"
id="upfile"
style="border:1px
dotted
#ccc">
<input
type="button"
value="浏览"
onclick="path.click()"
style="border:1px
solid
#ccc;background:#fff">
<input
type="file"
id="path"
style="display:none"
onchange="upfile.value=this.value">
写成这样,用一个text和一个button替代file,然后让file隐藏
③ html5uploader.js 怎么兼容ie8
html5uploader.js 兼容ie8方法如下:
拥有两个插件,一个是flash版本的uploadify,免费的。另一个是自己写的html5版本的,名叫html5uploader(好俗的名字。。),再加一个适配器uploadadapter,用来决定在什么时候调用哪个插件。页面中只调用uploadadapter。关键的难题就在于,页面中的代码是只写一次的,不管是flash的还是html5的都得能识别出页面上的参数,这也就是我的山寨版本的插件做的事情,原flash版本的配置参数通通得识别并有效。幸好,已经实现了。
上demo
很多东西,一上demo就都清楚了。。。
[html] view plain
<!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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadadapter.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg;*.png',
auto:false,
showUploaded:true,
baseurl:'.',//当前目录
multi:true,
removeTimeout:9999999,
uploarl:'upload.php'
});
});
</script>
</head>
<body>
<input type="file" name="file" id="upload" />
</body>
</html>
ie8下调用flash
firefox、chrome下调用html5
略有差异,ie8下圆角没了。。。如果不喜欢这个样式呢,就请打开css文件自己修改吧。
很简单的调用,可以看到在页面中使用的是uploadadapter,由它来决定调用哪个插件。俩个插件所需要的js文件和css文件都是异步引入的,此处用到一个小插件loadScript。参数没有写全,可以自己看源代码的注释~
uploadadapter中的调用情况是我需要的配置,你也可以随意修改。
四、相关文件注释
在此把文件夹中的文件做一个简要介绍:
/html5uploader html5上传插件,你也可以拿来单独使用
/uploadify3.2 flash上传插件,也可以拿来单独使用
/uploads 存放上传的文件
/jquery.loadScript.js 用于异步引入脚本的小插件
/jquery.uploadadapter.js 适配器,用来判断客户端类型,动态调用上传插件
/upload.php 后台处理程序,最基本的
五、上源码,注释很全哦
http://download.csdn.net/detail/never_say_goodbye/5090639
六、一个bug!!
很重的哦,我之前给疏漏了,在这里说一下,文件就不重新上传了
在jquery.html5uploader.js的158和164行,将$('.uploadify-progress')改为$('#'+file.index).fnd('.uploadify-progress'),否则上传多个文件会混淆。
④ html 表单上传图片
使用表单中的文件域(<input type="file".../>)控件可以上传文件。
打开DreamWeaver,这里使用的版本是CS6,新建一个php文件。
保存到网站目录下,命名为upload.php。
在代码中插入一个表单
对话框中,操作留空,方法选择“post”,编码类型输入“multipart/form-data”,名称命名为“upload_form”,其中编码类型必须为“multipart/form-data”。点击确定,产生的代码如下:
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。
结果如下:
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
不同的浏览器,对于文件域控件的显示不同,IE9浏览器和FireFox中的预览效果都要看一下
代码中,重要的是名为imgfile的文件域控件,type属性为“file”,表示这是一个文件域控件。
accept属性表示点击“浏览...”按钮时,弹出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性,有些浏览器并不支持。比如在IE9中,此属性不起任何作用。在chrome中,此属性起作用。
如果想支持所有的图像文件,accept值可以设置为“image/*”,在chrome中,文件类型显示
好了,html代码就写完了,因为action="",表示点击上传按钮时,将表单提交给自身,因此,我们还要添加接收表单的处理代码。
代码如下:
<?php
if (isset($_FILES['imgfile'])
&& is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile'];
$imgFileName = $imgFile['name'];
$imgType = $imgFile['type'];
$imgSize = $imgFile['size'];
$imgTmpFile = $imgFile['tmp_name'];
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);
$validType = false;
$upRes = $imgFile['error'];
if ($upRes == 0)
{
if ($imgType == 'image/jpeg'
|| $imgType == 'image/png'
|| $imgType == 'image/gif')
{
$validType = true;
}
if ($validType)
{
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
);
echo $strPrompt;
}
}
}
?>
代码分析:
$_FILES是一个数组变量,用于保存上传后的文件信息。
$_FILES['imgfile']表示文件域名称为'imgfile'的控件提交服务器后,上传的文件的信息。
一个上传的文件,有以下属性信息:
'name': 上传的文件在客户端的名称。
'type': 文件的 MIME 类型,例如"image/jpeg"。
'size': 已上传文件的大小,单位为字节。
'tmp_name':上传时,在服务器端,会把上传的文件保存到一个临时文件夹中,可以通过此属性得到临时文件名。
'error':文件在上传过程中的错误代码。如果上传成功,此值为0,其它值的意义如下:
1:超过了php.ini中设置的上传文件大小。
2:超过了MAX_FILE_SIZE选项指定的文件大小。
3:文件只有部分被上传。
4:文件未被上传。
5:上传文件大小为0。
代码中首先判断$_FILES['imgfile']变量是否存在,如果存在,并且$_FILES['imgfile']['tmp_name']变量所指文件被上传了,判断error属性,如果属性为0,把上传后的图像从临时文件夹移到upfile文件夹中,显示上传文件的信息,并显示上传后的图像。
如果error值不为0,表示上传失败,显示失败信息。
完成的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传图片文件</title>
</head>
<?php
if (isset($_FILES['imgfile'])
&& is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile'];
$upErr = $imgFile['error'];
if ($upErr == 0)
{
$imgType = $imgFile['type']; //文件类型。
/* 判断文件类型,这个例子里仅支持jpg和gif类型的图片文件。*/
if ($imgType == 'image/jpeg'
|| $imgType == 'image/gif')
{
$imgFileName = $imgFile['name'];
$imgSize = $imgFile['size'];
$imgTmpFile = $imgFile['tmp_name'];
/* 将文件从临时文件夹移到上传文件夹中。*/
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);
/*显示上传后的文件的信息。*/
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
);
echo $strPrompt;
}
else
{
echo "请选择jpg或gif文件,不支持其它类型的文件。";
}
}
else
{
echo "文件上传失败。<br>";
switch ($upErr)
{
case 1:
echo "超过了php.ini中设置的上传文件大小。";
break;
case 2:
echo "超过了MAX_FILE_SIZE选项指定的文件大小。";
break;
case 3:
echo "文件只有部分被上传。";
break;
case 4:
echo "文件未被上传。";
break;
case 5:
echo "上传文件大小为0";
break;
}
}
}
else
{
/*显示表单。*/
?>
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
<?php
}
?>
</html>
⑤ 如何使用第三方上传插件web uploader的demo
要解决302问题也很简单,就是html5的文件上传,正好最近在ueditor里看到网络的webuploader,会自动选择flash html5,就是一个成熟的解决方案了。
先看前端,我们将最常用的操作封装为插件,asp.net中和MVC中最好使用相对于应用程序的绝对路径,自行定义全局 applicationPath :var applicationPath = "@(Href("~")=="/"?"":Href("~"))";
前端插件代码:
⑥ html5文件上传控件的button样式怎么修改
你直接将它隐藏,然后自己写一个button。
给这个button加点击事件。
点击事件中在通过JS去触发上传文件控件的点击事件就可以了。
⑦ 把HTML5的手机网站嵌入安卓APP中,发现<input type='file' />的上传按钮功能失效,点击没有任何反应
安卓APP的WebView默认屏蔽了该控件的使用,有些安卓APP之所以能支持文件选择和上传,主要可能是有可能采取了如下措施之一:
(1)可能在该APP中重写了相关方法(http://stackoverflow.com/questions/5907369/file-upload-in-webview)
(2)提供了JS Bridge来供web页面调用
所以,单从前端技术上是解决不了这个问题的。
这个问题之所以不太好排查,一方面跟手机端的图片上传功能我不太常用到有很大关系,另一方面也因为见到一些其它的APP容器能支持该功能,所以思维在习惯上已经形成定势,误以为这是WebView默认就支持的。
末了,顺便提醒一句,下次进行类似功能的需求评审,别忘了先了解下相应的APP容器是否支持该功能,如果没有,则需要找到相应的客户端开发同学评估一下工时,以免造成影响项目进度的风险
⑧ html5+上传图片时有没有截图的插件(手机端的)
按住电源键(关机键)的同时按主屏幕(HOME)键,听见"咔嚓"一声,就代表截图成功了。
另外还有用截图软件截图的,你可以下载一款在你手机上最好用的截图软件,安装后就可以使用截图功能了。答题不易,互相帮助,手机提问的朋友在客户端右上角评价点满意即可.
如果你认可我的回答,请点击采纳为满意回答按钮!
⑨ html图片上传控件
提交错误是什么,你确定错误不是被提交页面的?