// 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='file'上传控件假样式

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

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

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

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

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

  4. <input type=file>上传唯一控件

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

  5. <input type="file">上传文件并添加路径到数据库

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

  6. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

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

  7. input(type='file')上传多张照片并显示,传到后台

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

  8. 判断input[type=file]上传文件格式

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

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

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

随机推荐

  1. scrapy之五大核心组件

    scrapy之五大核心组件 scrapy一共有五大核心组件,分别为引擎.下载器.调度器.spider(爬虫文件).管道. 爬虫文件的作用: a. 解析数据 b. 发请求 调度器: a. 队列 队列是一 ...

  2. Python爬虫——用BeautifulSoup、python-docx爬取廖雪峰大大的教程为word文档

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 廖雪峰大大贡献的教程写的不错,写了个爬虫把教程保存为word文件,供大家方便下载学习:http://p ...

  3. Windows字符集安装

    0. 获取字符集安装文件. 最简单的办法 上msdn i tell you 下载 多语言安装盘. 一般都比较大. 比如: 1. 进入windows10 操作系统. 运行输入: lpksetup 选择安 ...

  4. Freemarker 页面静态化技术使用入门案例

    在访问 新闻.活动.商品 详情页面时, 路径可以是 xx[id].html, 服务器端根据请求 id, 动态生成 html 网页,下次访问数据时,无需再查询数据,直接将 html 静态页面返回.这样一 ...

  5. spring后置处理器BeanPostProcessor

    BeanPostProcessor的作用是在调用初始化方法的前后添加一些逻辑,这里初始化方法是指在配置文件中配置init-method,或者实现了InitializingBean接口的afterPro ...

  6. (自用 )npm --save和--save-dev区别

    https://blog.csdn.net/playboyanta123/article/details/78349034(原文) 目前大多数基于vue的项目都是用vue-cli 创建的.当创建项目完 ...

  7. python爬虫之scrapy模拟登录

    背景: 初来乍到的pythoner,刚开始的时候觉得所有的网站无非就是分析HTML.json数据,但是忽略了很多的一个问题,有很多的网站为了反爬虫,除了需要高可用代理IP地址池外,还需要登录.例如知乎 ...

  8. scrapy几种反反爬策略

    一.浏览器代理 1.直接处理: 1.1在setting中配置浏览器的各类代理: user_agent_list=[ "Mozilla/5.0 (Windows NT 10.0; Win64; ...

  9. SQL约束(主键约束、外键约束、自动递增、不允许空值、值唯一、值默认、值限制范围)

    NOT NULL 不允许空值约束 NOT NULL 约束强制列不接受 NULL 值(NULL值就是没有值或缺值).NOT NULL 约束强制字段始终包含值,即不向字段添加值,就无法插入新记录或者更新记 ...

  10. git和svn的區別

    https://blog.csdn.net/bmicnj/article/details/78413058