input实现上传
很多时候我们会用到上传,实现一个普通的上传也很简单,不用引用繁琐的插件
一个普通的上传
<form action="=upload" method="post" enctype="multipart/form-data">
<input id="file1" name="fileupload" type="file" value="" />
<input id="" type="submit" value="上传" />
</form>
From上的属性
action是要上传的地址,要向什么地方发送表单数据,可以是绝对地址,也可以是相对地址。
method是要发送的方式,可以是post,也可以是get。
enctype规定了在发送之前对要发送的数据如何编码,multipart/form-data表示不需要对字符编码,如果是上传,必须用这个属性。
Input上的属性
accept此处没有定义,可以过滤文件上传的类型,如accept="image/gif, image/jpeg",多个用逗号隔开。
multiple如果加入了这个属性,表示可以支持多选,如multiple="multiple"。
---------------------------------------------------以上实现简单的上传就够了---------------------------------------------------------------------
上传后input会有一些属性,可以给我们提供一些便利。
<form action="=upload" method="post" enctype="multipart/form-data">
<input id="files1" name="fileupload" type="file" value="" onchange="fileChange()" />
<input id="" type="submit" value="上传" />
</form>
var files1 = document.getElementById('files1');
function fileChange(){
console.log(files1.files)
}
这里给input添加了一个事件,改变后获取input上的files属性。上传了一个文件后打印结果如下
可以看到,其中files里有一个对象,包含了上传文件的名字、大小以及格式,我们就可以根据这些属性来做一些事情。
如想要获取图片上传的名字,可用files1.files[0].name,大小可以用files[1].files[0].size等。
如果想让上传的图片显示出来,这里提供两种方法:
方法一:直接把名字给一个img的src(图片需要放在同文件夹内)。
<img src="" alt="" id="uploadImg">
<script>
var files1 = document.getElementById('files1');
var uploadImg = document.getElementById('uploadImg');
function fileChange(){
uploadImg.src = files1.files[0].name;
}
</script>
方法二:创建一个FileReader对象
<img src="" alt="" id="uploadImg">
<script>
var files1 = document.getElementById('files1');
var uploadImg = document.getElementById('uploadImg');
function fileChange(){
var reader = new FileReader();
reader.readAsDataURL(files1.files[0]);
reader.onload = function () {
uploadImg.src = this.result;
}
}
</script>
如果要实现多文件上传,同理用循环咯,既然有files[0],就有files[1],files[2].....,至于用哪种方法实现都可以。
方法一的例子:
<form action="Upload" method="post" enctype="application/x-www-form-urlencoded" >
<input onchange="cinput()" id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
</form>
<div id="imgList"></div>
<script>var File1 = document.getElementById('File1');
var imgList = document.getElementById('imgList');
function cinput() {
var imgHtml = '';
for(var i=0; i< File1.files.length; i++){
var imgHtmlTem = `<img id="img_preview" data-src="" src=${File1.files[i].name} data-holder-rendered="true" style="width: 100px; height:100px;display: block;">`;
imgHtml+=imgHtmlTem;
}
imgList.innerHTML = imgHtml;
}
</script>
end.
input实现上传的更多相关文章
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...
- 自定义input文件上传样式
前言 文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按 ...
- HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...
- HTML5的 input:file上传类型控制(转载)
http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- input按钮上传按钮样式
主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...
- 使用input=file上传
前台,form的target指向iframe <form action="/EmailHandler.ashx?action=upload" id="form1&q ...
- ASP.NET MVC使用input标签上传文件
有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...
随机推荐
- 关于saltstack
配置Saltstack master 服务器 master服务器:saltstack.master 172.18.1.103 minion客户端:minion01 172. ...
- java图片缩放与裁剪
import java.awt.Graphics; import java.awt.Image; import java.awt.image.BufferedImage; import java.io ...
- Java Mybatis实现主从同步
import org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource; public class DynamicDat ...
- 移动 ProgramData\Package Cache 文件夹
装完vs2017 发现C盘快木有空间了… 瞅瞅C盘下有啥能删的好释放下空间 就找到了 Package Cache 文件夹,占用空间接近15G… 查查这个文件夹还不建议删除… (http://super ...
- 为什么Dotnet Core的DI默认是在控制器中注入
转载请注明出处: https://www.cnblogs.com/zhiyong-ITNote/ DI的大概过程抽象成如下:接口对象 <-- 实现对象 <-- 抽象对象 在抽象对象中引入接 ...
- Kali Linux常用服务配置教程DHCP服务原理
Kali Linux常用服务配置教程DHCP服务原理 动态主机配置协议(Dynamic Host Configuration Protocol,简称DHCP)是一个局域网的网络协议,基于UDP协议工作 ...
- (转)RBAC权限管理
RBAC 模型作为目前最为广泛接受的权限模型 角色访问控制(RBAC)引入了Role的概念,目的是为了隔离User(即动作主体,Subject)与Privilege(权限,表示对Resource的一个 ...
- 03-Python入门学习-Python基础
一.与用户交互 1.什么是与用户交互 程序等待用户输入一些数据,然后程序执行完毕后为用户反馈信息 2.为何程序要与用户交互 为了让计算机能够像人一样与用户的交互 3.如何用 在python3中:inp ...
- php实现多进程和关闭进程
一.php实现多进程 PHP有个pcntl_fork的函数可以实现多进程,但要加载pcntl拓展,而且只有在linux下才能编译这个拓展. 先代码: <?php$arr = ['30000000 ...
- TCP三次握手四次挥手最通俗理解
工作过程TCP标志位:TCP共有6个标志位,分别是: SYN(synchronous),建立联机.ACK(acknowledgement),确认.PSH(push),传输.FIN(finish),结束 ...