自定义input type=”file”的样式以及引出的相关技术问题 | haojiiIE下面form表单提交失败，拒绝访问 input file click无效
IE下面form表单提交失败，拒绝访问
三月 27, 2014
最近有个系统，用到了file文件提交；
当前未选择文件.
我们原先是想通过点击selectFile这个浏览出发id=’PkgFile’这个隐藏的file控件，在chrome和火狐firefox浏览器都正常，可是在IE系列总是无效；
通过正常的jquery的submit()方法，也无法提交表单，通过fiddler监控没有发现有新的请求，非常奇怪；通过修改js代码， 调试，监控，都无法解决；
F12中通过$(“#uploadPkgFormLocal”).submit()提交表单，没有任何请求发送出来；最后使用document.getElementById(‘uploadPkgFormLocal’)提交的
时候，有一个提示，submit拒绝访问，这个是一个很重要的信息，至少证明可能是和安全相关；
从http://www.qttc.net/.html中看到一段话，幡然醒悟：
解决IE下不能上传文件的问题
其实这是IE安全限制问题，没有点击file的浏览按钮选择文件都不让上传
原来必须要亲自点击input file才可以出发form提交；
使用ionic+angular+phonegap开发APP入门
有时候朋友问我是做什么的？我说以前是用PHP写后台，最近是用H5写前台APP(俗称的Hybrid App); ...
Read More &
看几个闭包的例子
最近闭包在很多面试中都有涉及，这里给大家看几个闭包的例子，就懂了； [crayon-54a...
Read More &
Javascript 闭包
看到一篇讲解js底层原理的文章，有些难度和深度，这里转载下，值得分析学习； 简介 Closure 所谓“闭包”...
Read More &
Hi, it’s hard to find
in google, i found it on 12 spot, you should build some high quality backlinks, i know what can help you, just search in google for – edaya traffic increase
近期评论文章归档您当前的位置：&>&&>&
点评：本篇文章小编为大家介绍，HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法。需要的朋友参考下HTML中与form有关的东东
html5之前，表单内的从属元素需要放入标签中，现在可以为标签指定form标签即可
点评：该功能解决了我们实际中遇到的一些问题，比如iframe模拟异步图片上传时，就必须将图片写到form外。
formaction
formmethod
该属性用于按钮（submit）让表单提交页面可又按钮控制
formmethod指定各按钮提交方式
placehoder
该属性非常有用，用于文本框中显示提示信息，非常有用的一属性
list属性需要与datalist一同使用，相当于文本框，模拟select，非常适用的一个属性
用于文本框主动获取焦点，有用的东东
新增input属性，解放验证，各浏览器支持不好
日期类验证，会出现日期选择插件哦。。。
只能是数字
控制数字范围
颜色选择器，好东西啊。。。
HTML5中增加了很多与form有关的属性，说实在的，这些东西真心贴心啊！！！很大程度上讲：完全解放表单验证若不是考虑兼容性问题，老夫恨不得立即投入其中，但一旦想起兼容性问题的话，你就会非常头疼！！！因为原本很好的东西，却是因为历史的原因，反而会增加我们的工作量！！！在错的时间，做对的事情，他看起来是对的，实际上也是对的。。。但你会发现，他错了。。。。增强页面元素
figure/figcaption
据说表示页面独立内容，移除后无影响，暂无发现用处..
该标签有点意思，用于替代js中，元素收起展开功能。
最新ff都不支持&&个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
高亮显示，当真语义化
潘棵牵梢愿姹gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
老夫就没有用过这个主。。。
&以上元素属于可有可无的元素，不必赘述，接下来，本文明星对象登场：文件API&FileList与file对象：在html4中，file标签只允许选择一个文件，但html5中，对file标签设置multiple属性后，变可以选择多文件了！！！而，选择后便会形成这里的filelist对象，即一个个file组成的对象列表，简单来说就是file数组。file对象具有2属性，name代表文件名（不包括路径），lastModifiedDate表示最后修改时间其实我们在html4中操作file时，可以获取本地很多属性，比如文件大小，但是万恶的ie不支持，到ie9后才有所好转。所以想客户端提示文件上传过大的同学放弃吧。。。&Blob对象表示二进制原始数据，提供一slice方法访问字节内部原始数据；size表示blob对象字节长度、type表示其mime类型，类型未知则返回空字符串。来来，简单做一实验：复制代码代码如下: 关于File
&!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&
&title&&/title&
&script src="../jquery-1.7.1.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(document).ready(function () {
$('#wl').click(function () {
var f = $('#file')[0];
var s = '';
&/script& &/head& &body&
&input type="file" id="file" multiple /&
&button id="wl"&
文件上传&/button& &/body& &/html& 我们在ff中选择图片后，提交，设个断点看看：file主角登场，就是他了，我们将之属性输出来看看：真的是应有尽有啊！有了该属性就可以做很多事情了，但是。。。我们来看看ie7、8：各位观众，人家压根没这个属性，所以一切百搭。。。话说，我觉得ie浏览器调试起来很痛苦，请问各位大神有没有什么好的ie开发插件，就像ff的firebug，google自带的插件？？&FIleReader接口 filereader接口，可将文件读入内存，有了这个东东我们就可以很舒服的做图片预览了，但他的公用不止如此。filereader的四个方法：readAsBinaryString 将文件读取为二进制码&&通常我们将数据传给后端；readAsText 将文件读取为文本&&读取文本内容；readAsURL 将文件读取为DataURL&&一般是小文件，图片或者html；abort 中断读取，因为文件过大等待时间就很长了&filereader接口事件：onabort 读取中断触发；onerror 读取失败触发；onloadstart 开始读取时触发；onprogress 读取中onload 读取成功时触发；onloadend 读取完成后触发，无论成功失败；光说不练不行，我们这里做个小实验：复制代码代码如下: 我是一个小实验
&!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&
&title&&/title&
&script src="../jquery-1.7.1.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(document).ready(function () {
var bt = $('#wl');
var file = $('#file');
var type = $('#type');
var result = $('#result');
var func = {};
func.readAsDataURL = function (file) {
//验证是否为图片
if (!/image///w+/.test(file.type)) {
alert('非图片格式');
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
result.html('&img src="' + this.result + '"/&');
func.readAsBinaryString = function (file) {
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function (e) {
result.html(this.result);
func.readAsText = function (file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (e) {
result.html(this.result);
bt.click(function () {
if (func[type.val()] && typeof func[type.val()] == 'function') {
func[type.val()](file[0].files[0]);
&/script& &/head& &body&
&div id="result"&
&input type="file" id="file" multiple /&
&select id="type"&
&option value="readAsDataURL"&readAsDataURL&/option&
&option value="readAsBinaryString"&readAsBinaryString&/option&
&option value="readAsText"&readAsText&/option&
&button id="wl"&
读取文件&/button&
&/body& &/html& 用最新浏览器运行试试呢！我们再做一个判断，看看其事件执行顺序：　　　　　& reader.onload = function (e) {&&&&&&&&&&&&&&&&&&& alert('onload');&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& reader.onprogress = function (e) {&&&&&&&&&&&&&&&&&&& alert('onprogress');&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& reader.onerror = function (e) {&&&&&&&&&&&&&&&&&&& alert('onerror');&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& reader.onloadstart = function (e) {&&&&&&&&&&&&&&&&&&& alert('onloadstart');&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& reader.onloaded = function (e) {&&&&&&&&&&&&&&&&&&& alert('onloaded');&&&&&&&&&&&&&&& }此处具体应用：复制代码代码如下: 简单图片上传
&!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&
&title&&/title&
&style type="text/css"&
body{ font-size: 14}
.image_upload{ margin:10 border: 1px solid #E0E0E0; text-align: padding:5 display: inline- position: }
.image_upload img{ max-height: 150 max-width: 150 }
.image_upload .rate { position: top: 6 left: 6 padding: 0 5 color: W background: border-radius: 5
filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }
.image_upload .delete { background: url("images/del.png") no-repeat scroll 0 0 cursor: height: 16 position: right: -6 top: -6 width: 16}
&script src="js/jquery-1.7.1.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(document).ready(function () {
var j_bt_sub = $('#submitForm'),
j_form = $('#form'),
j_state = $('#upState'),
j_file = $('#files');
var is_support = //判断是否支持高级特性，经测试若是不支持filereader与file
if (typeof FileReader === 'undefined') is_support =
j_file.change(function () {
var file = j_file.get(0);
if (!file.files[0]) is_support =
//支持高级功能的浏览器
if (is_support) {
files = file.
for (var k = 0, len = files. k & k++) {
var file = files[k];
var reader = new FileReader();
reader.readAsDataURL(file);
(function (k) {
reader.onloadend = function (e) {
if (reader.error) {
alert(reader.error);
var up = $('&div class="image_upload" id="up_' + k + '"&&/div&');
var img = $('&img src="' + this.result + '" alt="" id="img_' + k + '"&');
var rate = $('&div class="rate" id="rate_' + k + '"&0%&/div&');
var del = $('&div class="delete" title="删除" id="del_' + k + '"&&/div&');
up.append(img);
up.append(rate);
up.append(del);
del.click(function () {
$(this).parent().remove();
j_state.append(up);
//不支持的话采用传统方式
//此处应该支持平滑后退，后面考虑
j_bt_sub.click(function (e) {
if (is_support) {
var file = j_file.get(0);
files = file.
for (var k = 0, len = files. k & k++) {
var file = files[k];
upload(file, k);
function upload(file, k) {
var up = $('#up_' + k);
var img = $('#img_' + k);
var rate = $('#rate_' + k);
var del = $('#del_' + k);
var fd = new FormData();
fd.append('upload', file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
var percentComplete = Math.round((e.loaded) * 100 / e.total);
rate.html(percentComplete.toString() + '%');
}, false);
// 文件上传成功或是失败
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
rate.html('100%');
var url = xhr.responseT
img.attr('src', url);
var s = '';
xhr.open("POST", "fileUpload.ashx");
xhr.send(fd);
&/script& &/head& &body&
&div id="upState"&&/div&
&form id="uploadForm" action="fileUpload.ashx" method="post" enctype="multipart/form-data"&
&input id="files" type="file" size="30" name="file[]" multiple /&
&button type="button" id="submitForm"&上传图片&/button&
&/form& &/body& &/html& 拖放API其实之前，我还用jquery写了个拖放的插件呢。。工作中碰到的一些东西【弹出窗口】【拖放】【异步文件上传】但是集成在HTML5中当然更好！！！我们现在来看看这个东东。。。并且它的强大之处，就是不止在浏览器中拖动，这就不得了了哦（拖动图片上传）html5中默认对图片、链接可以拖放，其它元素需要设置draggable=&true&才能拖放，事不宜迟，老夫马上去试试。复制代码代码如下:&strong&拖放的例子 &/strong& &!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&/head& &body& &div id="dragme" draggable="true" style=" width: 200 border: 1"&请拖放&/div& &div id="text" style=" width: 200 height: 200 border: 1"&&/div& &script type="text/javascript"&
document.ondragover = function (e) {
e.preventDefault();
document.ondrop = function (e) {
e.preventDefault();
var source = document.getElementById('dragme');
var dest = document.getElementById('text');
source.addEventListener('dragstart', function (e) {
var dt = e.dataT
dt.setData('text/plain', '您好' + new Date());
}, false);
dest.addEventListener('dragend', function (e) {
e.preventDefault();
}, false);
dest.addEventListener('drop', function (e) {
var dt = e.dataT
var text = dt.getData('text/plain');
dest.innerHTML +=
e.stopPropagation();
e.preventDefault();
}, false);
&/script& &/body& &/html&拖放时候一定要记住，阻止页面默认行为，否则会打开新窗口的，其中以下亦是重点：1 拖放可使用DataTransfer传递数据，该对象是非常有用的，因为在拖动目标元素时，可能会经过其它元素，我们可以用此传递信息；API：dragstart 被拖放元素 开始拖放时drag 被拖放元素 拖放过程中dragenter 拖放过程中鼠标经过的元素 被拖放元素开始进入本元素时dragover &拖放过程中鼠标经过的元素 本元素内移动drageleave &拖放过程中鼠标经过的元素 离开本元素drop 拖放的目标元素 拖动的元素放到了本元素中dragend 拖放的对象 拖放结束其实这里是有问题的，我并未去深入研究从开始拖动到经过各种元素会产生神马情况，这个可以作为二次学习时的重点研究对象。结语 html5的文件和表单做的比较精致，个人感觉比布局新增的几个标签有用多了，明天开始学习canvas，虽然不懂，虽然见过，但是还是感觉很厉害的样子！&
竭诚为您服务！淘宝官方提供，安全、快捷！UC登陆新浪游戏出现No input file specified。我的手机是OPPO A203，UC浏览器是UC Mini
UC登陆新浪游戏出现No input file specified。我的手机是OPPO A203，UC浏览器是UC Mini
下载个FLASH插件就好了
这和插件有什么联系？手机啊，还是非智能的...向高手...
JAVA也有的啊·提示No input file specified·你就下载应该有下载连接的
嗯，谢谢了..
的感言：很感谢！
相关知识等待您来回答
手机领域专家
当前分类官方群讨论、解答、交流电脑数码相关的疑难问题