input type=file上传控件老问题

时间:2022-09-25 21:11:07

// 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框。

// 2.如果在手机上使用时,一般不会出现这种较丑的

// 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数里使用脚本触发INPUT控件的

// 4.结果发现无效,无法使用JS触发INPUT的控件。(在PC端有的浏览器可以,在手机浏览器中有的安卓机可以,苹果机不行)

<form>

<input name="photos" type="file" accept="image/*">

<input name="photos" type="file" accept="image/*" capture="camcorder">

<input name="audios" type="file" accept="image/*" capture="microphone">

</form>

// 5.结果使用网友的办法,将INPUT控件的大小与按钮大小设为一样的,然后将控件的透明度设为0,盖在按钮上.

这样看到的是按钮,但点击的还是INPUT,于是就可以弹出选择框了

// 注意事项

1.提交时要放在表单元素中<form><input type="file" name="name属性一定要有,不然后台拿不到文件"/></form>

2.可以使用jquery.form这个异步表单插件,很好用。

$('#theform').ajaxSubmit({

type:'post',// 表单方式

url:'abx/abz',// 提交地址

data:para,// 参数,可以是一个JSON对象

// 提交成功
       success: function (data) {
          $('#resultimg').html('成功,已经上传图片。');
       },

// 提交失败
      error: function (data) {
          $('#resultimg').html('出错了,请刷新重试.');
      }
});

input type=file上传控件老问题的更多相关文章

  1. input type&equals;&&num;39&semi;file&&num;39&semi;上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  2. input type&equals;file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  3. Js获取file上传控件的文件路径总结

    总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...

  4. &lt&semi;input type&equals;file&gt&semi;上传唯一控件

    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...

  5. &lt&semi;input type&equals;&quot&semi;file&quot&semi;&gt&semi;上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"&gt ...

  6. HTML &lt&semi;input type&equals;&quot&semi;file&quot&semi;&gt&semi;上传文件——结合asp&period;net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  7. input&lpar;type&equals;&&num;39&semi;file&&num;39&semi;&rpar;上传多张照片并显示,传到后台

    以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!! 1.首先是前端页面代码: 其中,<input type="file" id="file_input&qu ...

  8. 判断input&lbrack;type&equals;file&rsqb;上传文件格式

    input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...

  9. jquery判断 input type&equals;"file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

随机推荐

  1. oracle表分区详解(按天、按月、按年等)

    分区表的概念:  当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下降,这时就应该考虑对表进行分区.表进行分区后,逻辑上表仍然是一张完整的表,只是将表中的数据在物理上存放到多个表空间 ...

  2. ContainerBase&period;addChild&colon; start&colon; org&period;apache&period;catalina&period;LifecycleException&colon; Failed to start component解决

    第一:先确定一下开发流程是否正确 1.写好servlet组件类 2.写好web.xml文件--向服务器介绍组件 3.发布--就是拷贝 注意:要拷贝包结构,不要只拷贝组件类文件 另外,拷贝的是.clas ...

  3. mac 下 配置 xhprof

    1: 下载 安装 xhprof wget http://pecl.php.net/get/xhprof-0.9.3.tgztar zxf xhprof-0.9.3.tgzcd xhprof-0.9.3 ...

  4. pythn BeautifulSoup

    http://rsj217.diandian.com/post/2012-11-01/40041235132 Beautiful Soup 是用 Python 写的一个 HTML/XML 的解析器,它 ...

  5. mongrel

    Mongrel是一种快速的针对Ruby的Http 服务器,专门为部署发布rails应用而产生的. 可以替代mod_ruby/fastcgi,可以用于生产部属环境. 支持集群,扩展性强. 有各种丰富插件 ...

  6. MongoDb的&OpenCurlyDoubleQuote;not master and slaveok&equals;false”错误及解决方法&comma;读写分离

    首先这是正常的,因为SECONDARY是不允许读写的, 在写多读少的应用中,使用Replica Sets来实现读写分离.通过在连接时指定或者在主库指定slaveOk,由Secondary来分担读的压力 ...

  7. 【CTF杂项】常见文件文件头文件尾格式总结及各类文件头

    文件头文件尾总结 JPEG (jpg), 文件头:FFD8FF 文件尾:FF D9PNG (png), 文件头:89504E47 文件尾:AE 42 60 82GIF (gif), 文件头:47494 ...

  8. Go 灵活多变的切片Slice

    我们知道数组定义好之后其长度就无法再修改,但是,在实际开发过程中,有时候我们并不知道需要多大的数组,我们期望数组的长度是可变的, 在 Go 中有一种数据结构切片(Slice) 解决了这个问题,它是可变 ...

  9. 1月4日笔记 (vi编辑器)更新&period;&period;&period;

      vi编辑器,全称是visual interface,可以执行输出.删除.查找.替换等众多的文本操作. vi并不是一个排版程序,不可以对字体.格式.段落等其他的属性进行编排. vi是全屏文本编辑程序 ...

  10. youcompleteme 自动补全

    1. 拷贝配置文件 cp ~/.vim/bundle/YouCompleteMe/cpp/ycm/.ycm_extra_conf.py ~/.vim/.ycm_extra_conf.py 2. 修改配 ...