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

一个普通的上传

    <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. 修改linux终端命令行各字体颜色

    这里我用的是 CentOS 7.5,觉得linux终端命令行全部为白色,会经常导致命令与输出内容难以分辨.于是上网找到修改linux终端命令行颜色的方法,发现通过定义PS1环境变量即可实现,下面我以r ...

  2. thinkphp5调用阿里大鱼短信

    :在Controller.php public function send() { if (request()->isPost()) { $phone = input('post.phone/s ...

  3. 【js】正则

    复习字符串操作search 查找substring 获取子字符串charAt 获取某个字符split 分割字符串,获得数组 <script> var str="abcdef&qu ...

  4. zoj3781

    zoj3781赛场上堵在了缩点上emmmmm把原始图相同颜色的方块缩成一个点,然后与它周围不同颜色的联通块连双向边,然后枚举每个点然后求最大深度的最小值因为每次翻转都相当于深度+1(可以手动模拟一下 ...

  5. 潭州课堂25班:Ph201805201 tornado 项目 第九课 深入应用 WebSockets(课堂笔记)

    tornado 相关说明 在 handler 中创建一个  chat.py 文件,用来处理聊天室 在 templates 模板文件夹下创建 room.html 文件,是个聊天室 做好服务器的准备

  6. python#读csv,excel,json数据

    #读csv,excel,json数据 with open('E:\\test\\xdd.csv','r') as f: for line in f.readlines(): print(line) i ...

  7. ORACLE11g 重装系统后根据dbf恢复数据库

    1.安装一个和原系统一致的oracle 环境,主要包括版本.数据名sid.实例名.路径和数据库编码一致 2.修改listener.ora的参数 SID_LIST_LISTENER = (SID_LIS ...

  8. angular.injector()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 转 InnoDB索引

    原文: http://blog.codinglabs.org/articles/theory-of-mysql-index.html InnoDB索引实现 虽然InnoDB也使用B+Tree作为索引结 ...

  10. Spring-Boot 使用 Jedis 操作 Redis

    背景: 1.Redis 之前学了个皮毛 还忘的差不多了,感觉公司项目中的Redis用的真的牛逼,so 需要深造. 2.有个同事在搞Jedis,勾起了我对知识的向往,不会用,但是很渴望. 过程: 1.改 ...