很多时候我们会用到上传,实现一个普通的上传也很简单,不用引用繁琐的插件

一个普通的上传

    <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实现上传的更多相关文章

  1. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  2. 如何用一张图片代替 'input:file' 上传本地文件??

    今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传 ...

  3. 自定义input文件上传样式

    前言 文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按 ...

  4. HTML5: input:file上传类型控制

    ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...

  5. HTML5的 input:file上传类型控制(转载)

    http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...

  6. HTML5的 input:file上传类型控制

    一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...

  7. input按钮上传按钮样式

    主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  9. 使用input=file上传

    前台,form的target指向iframe <form action="/EmailHandler.ashx?action=upload" id="form1&q ...

  10. ASP.NET MVC使用input标签上传文件

    有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...

随机推荐

  1. 关于saltstack

    配置Saltstack master 服务器 master服务器:saltstack.master  172.18.1.103 minion客户端:minion01              172. ...

  2. java图片缩放与裁剪

    import java.awt.Graphics; import java.awt.Image; import java.awt.image.BufferedImage; import java.io ...

  3. Java Mybatis实现主从同步

    import org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource; public class DynamicDat ...

  4. 移动 ProgramData\Package Cache 文件夹

    装完vs2017 发现C盘快木有空间了… 瞅瞅C盘下有啥能删的好释放下空间 就找到了 Package Cache 文件夹,占用空间接近15G… 查查这个文件夹还不建议删除… (http://super ...

  5. 为什么Dotnet Core的DI默认是在控制器中注入

    转载请注明出处: https://www.cnblogs.com/zhiyong-ITNote/ DI的大概过程抽象成如下:接口对象 <-- 实现对象 <-- 抽象对象 在抽象对象中引入接 ...

  6. Kali Linux常用服务配置教程DHCP服务原理

    Kali Linux常用服务配置教程DHCP服务原理 动态主机配置协议(Dynamic Host Configuration Protocol,简称DHCP)是一个局域网的网络协议,基于UDP协议工作 ...

  7. (转)RBAC权限管理

    RBAC 模型作为目前最为广泛接受的权限模型 角色访问控制(RBAC)引入了Role的概念,目的是为了隔离User(即动作主体,Subject)与Privilege(权限,表示对Resource的一个 ...

  8. 03-Python入门学习-Python基础

    一.与用户交互 1.什么是与用户交互 程序等待用户输入一些数据,然后程序执行完毕后为用户反馈信息 2.为何程序要与用户交互 为了让计算机能够像人一样与用户的交互 3.如何用 在python3中:inp ...

  9. php实现多进程和关闭进程

    一.php实现多进程 PHP有个pcntl_fork的函数可以实现多进程,但要加载pcntl拓展,而且只有在linux下才能编译这个拓展. 先代码: <?php$arr = ['30000000 ...

  10. TCP三次握手四次挥手最通俗理解

    工作过程TCP标志位:TCP共有6个标志位,分别是: SYN(synchronous),建立联机.ACK(acknowledgement),确认.PSH(push),传输.FIN(finish),结束 ...