input type=file上传控件老问题
// 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上传控件老问题的更多相关文章
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- input type=file 上传文件样式美化(转载)
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- Js获取file上传控件的文件路径总结
总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...
- <input type=file>上传唯一控件
值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- input(type='file')上传多张照片并显示,传到后台
以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!! 1.首先是前端页面代码: 其中,<input type="file" id="file_input&qu ...
- 判断input[type=file]上传文件格式
input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
随机推荐
- MYSQL业务数据简单脱敏方案
removesensitiveinformationplan.sh #!/bin/sh #!在模拟库上运行如下脚本 #!生产库crm-db #!模拟库crm-mock #!.备份生产库 mysqldu ...
- 分布式ID生成系统 UUID与雪花(snowflake)算法
Leaf——美团点评分布式ID生成系统 -https://tech.meituan.com/MT_Leaf.html 网游服务器中的GUID(唯一标识码)实现-基于snowflake算法-云栖社区-阿 ...
- ssm项目跨域访问
最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...
- table index & delete array item
table index & delete array item https://www.iviewui.com/components/table#ZDYLMB 编辑 row = { " ...
- windows 10 & task view & shortcut
windows 10 & task view & shortcut Win + Tab https://blogs.windows.com/windowsexperience/2014 ...
- falsk sqlalchemy 自关联创建评论回复数据库
本项目在于创建类似微信上的评论回复功能的数据库 基类: from app import db from datetime import datetime class Basemadel(object) ...
- Lodop输出页面input文本框的最新值
默认使用Lodop打印页面上的文本框等,会发现虽然页面上文本框输入了值,打印预览却是空的,这是由于没有把最新的值传入Lodop. 如图,演示的是Lodop如何输出文本框内的新值,这里整个页面只有inp ...
- Js 常用字符串操作 API
常用的一些字符串操作 API 整理 1.str.charAt(index).str.charCodeAt(index) - 返回指定位置的字符 / 字符编码(0~65535) index - 必须,表 ...
- change safari user agent
defaults write com.apple.safari customuseragent '"mozilla/5.0 (iphone; cpu iphone os 8_1 like m ...
- 9.Pod控制器概念和基本操作2
利用一个简单的例子来启动一个deployment的Pod控制器 [root@master song]# cat deploy.yml apiVersion: apps/v1 kind: Deploym ...