input上传文件限定上传类型

在使用<input type="file" />这个标签来上传文件的时候指定上传文件类型
关键: 使用accept属性
比如: <input className={styles.fileEle} onChange={this.onImportExcel} type="file" accept=".xls, .xlsx" />
注意: 指定多种类型的话, 中间使用,分隔
下面是常见类型后缀表

*.jpeg

image/jpeg

JPEG

*.doc

application/msword

MS Word Document

*.gif

image/gif

Graphic Interchange Format

*.htm

text/html

HyperText Markup Language

*.html

text/html

HyperText Markup Language

*.jpe

image/jpeg

JPEG

*.jpeg

image/jpeg

JPEG

*.jpg

image/jpeg

JPEG

*.mp3

audio/mpeg

MPEG Audio Stream, Layer III

*.mp4

audio/mp4, video/mp4

MPEG-4 Audio/Video

*.pdf

application/pdf

Portable Document Format

*.png

image/png

Portable Network Graphics

*.ppt

application/vnd.ms-powerpoint

MS PowerPoint Presentation

*.txt

text/plain

Plain Text

*.xls

application/vnd.ms-excel

MS Excel Spreadsheet

*.xml

text/xml, application/xml

Extensible Markup Language

*.zip

aplication/zip

Compressed Archive

*.wps

application/vnd.ms-works

Works Text Document

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
##KodExplorer (http://kalcaddle.com/) ###ver2.61(2014.7.12) `商业版授权请联系:kalcaddle#qq.com` #### 1.是什么: - Kodexplorer为千帆网络工作室开发的一款服务器文件管理程序。 - 完美取代FTP管理:可用于服务器文件管理,zip解压缩 备份还原、支持图片、音乐、视频预览、office、pdf等格式在线预览。文件夹拖拽上传……。 - 在线编程:支持几乎所有编程语言的在线编辑(高亮,多光标编辑.堪比本地的sublime) - 极佳的操作体验:及其便捷的快捷键支持,让你拥有本地化的体验 - 中文等多语言支持:中文编码全面兼容,文件编辑自动适配。 - 超快的速度:全面采用Ajax+Json进行数据通信,毫秒级的响应速度; - 全平台兼容性:Win Linux Mac (Apache、Nginx、IIS) #### 2.使用场景: - 取代FTP,服务端、客户端软件等复杂的安装配置。kod可以一键安装随处使用. - 你可以用它来管理你的服务器(备份,在线解压缩,版本发布....) - 你可以把他当做管理linux的一个操作系统界面 - 可以用来作为私有云存储系统,存储你的文件... - 当然你也可以用来分享文件 - Web IDE / browser code editor awesomeness - 更多场景等你来挖掘!…… #### 3.使用说明 管理员: admin/admin 普通用户:demo/demo 游客用户:guest/guest [如何使用] 下载程序,解压上传到你的服务器路径下,data目录设置777权限。访问体验超便捷的服务吧! (data目录没有写权限会导致配置修改不能保存、不能新建用户等) [关于上传问题] 程序没有做任何限制,如果需要上传大文件,则修改 php.ini:`upload_max_filesize = 1000M post_max_size = 1000M` [关于解压缩问题] 程序不做任何限制,如若失败请设置php内存限制。memory_limit 1000M [关于兼容性] 建议使用chrome firefox ie9+ 体验更完整。ie8以下基本上不做兼容处理。chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data/system/member.php 密码为明文的md5值 例如将admin密码重设为admin 则修改第一行:"name":"admin","password":"21232f297a57a5a743894a0e4a801fc3" ![](https://cloud.githubusercontent.com/assets/3761968/2583304/764f562a-b9cf-11e3-8e59-afdbdffc20eb.png) ###ver2.61 `2014/7/12` ---- ####update: - 实时搜索,根据搜索框内容变化,实时选中匹配到的结果; - 弹出搜索框遍历子文件夹递归搜索 - session key 加入kod_前缀 避免和其他系统key冲突 - 编辑器选中优化 选择鼠标到窗口外事件处理 ####fix bug:(bug解决和程序优化) - backspace后退截获浏览器事件,作为后退前一次访问的文件夹; - 搜索首字母不匹配问题 - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - zip压缩没有权限 提示红色,false 统一查找 - 登录成功后 验证码输错清除 - 非root用户拖拽到文件夹问题 - 非root解压问题 不能解压 - list oexe 图标问题 - 用户目录不存在判断 - fileCahe 互斥锁 reset 不用 - ie 8~10样式问题调整 ###ver2.6 `2014/7/6` ---- ####update: - 完全性优化;加入严格的校验机制 - 首次运行环境检测[data目录检测,必须的函数支持提示] - 上传已存在处理——创建副本(另外包括粘贴,解压) - 选中优化 ctrl选中拖拽 - 键盘快捷键选中文件,多个字符
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序
什么是SWFUpload?   SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点   * 可以同时上传多个文件;   * 类似AJAX的无刷新上传;   * 可以显示上传进度;   * 良好的浏览器兼容性;   * 兼容其他JavaScript库 (例如:jQuery, Prototype等);   * 支持Flash 8和Flash 9;   SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。   在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。 [编辑本段]文档中文翻译   http://www.v-sky.com/doc/swfupload/v2.1.0/Documentation.html [编辑本段]效果演示   * Classic Form Demo http://demo.swfupload.org/formsdemo ;   * Features Demo http://demo.swfupload.org/featuresdemo ;   * Application Demo http://demo.swfupload.org/applicationdemo ;   * v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ; [编辑本段]选择合适的Flash控件   在发行包(SWFUpload v2)中含有2个版本的Flash控件(swfupload_f8.swf 与wfupload_f9.swf),其中第一个版本拥有最佳的兼容性,但是为此损失了部分功能;而第二个版本提供了一些附加的功能但是损失了兼容性。 [编辑本段]SWFUpload的初始化与配置   首先,在页面中引用SWFUpload.js ,如      然后,初始化SWFUpload ,如   var swfu;   window.onload = function () {   swfu = new SWFUpload({   upload_url : "http://www.swfupload.org/upload.php",   flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480"   });   };   以下是一个标准的SWFUpload初始化设置所需的参数,你可以根据需要自己进行删减:   {   upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL   file_post_name : "Filedata", 是POST过去的$_FILES的数组名   post_params : {   "post_param_name_1" : "post_param_value_1",   "post_param_name_2" : "post_param_value_2",   "post_param_name_n" : "post_param_value_n"   },   file_types : "*.jpg;*.gif", 允许上传的文件类型   file_types_description: "Web Image Files", 文件类型描述   file_size_limit : "1024", 上传文件体积上限,单位MB   file_upload_limit : 10, 限定用户一次性最多上传多少个文件,在上传过程中,该数字会累加,如果设置为“0”,则表示没有限制   file_queue_limit : 2, 上传队列数量限制,该项通常不需设置,会根据file_upload_limit自动赋值   fl
将Apache的commons-fileupload.jar放在应用程序的WEB-INF\lib下,即可使用。下面举例介绍如何使用它的文件上传功能。 所使用的fileUpload版本为1.2,环境为Eclipse3.3+MyEclipse6.0。FileUpload 是基于 Commons IO的,所以在进入项目前先确定Commons IO的jar包(本文使用commons-io-1.3.2.jar)在WEB-INF\lib下。 此文作示例工程可在文章最后的附件中下载。 示例1 最简单的例子,通过ServletFileUpload静态类来解析Request,工厂类FileItemFactory会对mulipart类的表单中的所有字段进行处理,不只是file字段。getName()得到文件名,getString()得到表单数据内容,isFormField()可判断是否为普通的表单项。 demo1.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> //必须是multipart的表单数据。 <form name="myform" action="demo1.jsp" method="post" enctype="multipart/form-data"> Your name: <br> <input type="text" name="name" size="15"><br> File:<br> <input type="file" name="myfile"><br> <br> <input type="submit" name="submit" value="Commit"> </form> </body> </html> demo1.jsp <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import="org.apache.commons.fileupload.*"%> <%@ page import="org.apache.commons.fileupload.servlet.*"%> <%@ page import="org.apache.commons.fileupload.disk.*"%> <%@ page import="java.util.*"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <% boolean isMultipart = ServletFileUpload.isMultipartContent(request);//检查输入请求是否为multipart表单数据。 if (isMultipart == true) { FileItemFactory factory = new DiskFileItemFactory();//为该请求创建一个DiskFileItemFactory对象,通过它来解析请求。执行解析后,所有的表单项目都保存在一个List中。 ServletFileUpload upload = new ServletFileUpload(factory); List<FileItem> items = upload.parseRequest(request); Iterator<FileItem> itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); //检查当前项目是普通表单项目还是上传文件。 if (item.isFormField()) {//如果是普通表单项目,显示表单内容。 String fieldName = item.getFieldName(); if (fieldName.equals("name")) //对应demo1.html中type="text" name="name" out.print("the field name is" + item.getString());//显示表单内容。 out.print("<br>"); } else {//如果是上传文件,显示文件名。 out.print("the upload file name is" + item.getName()); out.print("<br>"); } } } else { out.print("the enctype must be multipart/form-data"); } %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> </body> </html> 结果: the field name isjeff the upload file name isD:\C语言考试样题\作业题.rar 示例2 上传两个文件到指定的目录。 demo2.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> <form name="myform" action="demo2.jsp" method="post" enctype="multipart/form-data"> File1:<br> <input type="file" name="myfile"><br> File2:<br> <input type="file" name="myfile"><br> <br> <input type="submit" name="submit" value="Commit"> </form> </body> </html> demo2.jsp <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import="org.apache.commons.fileupload.*"%> <%@ page import="org.apache.commons.fileupload.servlet.*"%> <%@ page import="org.apache.commons.fileupload.disk.*"%> <%@ page import="java.util.*"%> <%@ page import="java.io.*"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%String uploadPath="D:\\\\temp"; boolean isMultipart = ServletFileUpload.isMultipartContent(request); if(isMultipart==true){ try{ FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); List<FileItem> items = upload.parseRequest(request);//得到所有的文件 Iterator<FileItem> itr = items.iterator(); while(itr.hasNext()){//依次处理每个文件 FileItem item=(FileItem)itr.next(); String fileName=item.getName();//获得文件名,包括路径 if(fileName!=null){ File fullFile=new File(item.getName()); File savedFile=new File(uploadPath,fullFile.getName()); item.write(savedFile); } } out.print("upload succeed"); } catch(Exception e){ e.printStackTrace(); } } else{ out.println("the enctype must be multipart/form-data"); } %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> </body> </html> 结果: upload succeed 此时,在"D:\temp"下可以看到你上传的两个文件。 示例3 上传一个文件到指定的目录,并限定文件大小。 demo3.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> <form name="myform" action="demo3.jsp" method="post" enctype="multipart/form-data"> File:<br> <input type="file" name="myfile"><br> <br> <input type="submit" name="submit" value="Commit"> </form> </body> </html> demo3.jsp <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import="org.apache.commons.fileupload.*"%> <%@ page import="org.apache.commons.fileupload.servlet.*"%> <%@ page import="org.apache.commons.fileupload.disk.*"%> <%@ page import="java.util.*"%> <%@ page import="java.io.*"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <% File uploadPath = new File("D:\\temp");//上传文件目录 if (!uploadPath.exists()) { uploadPath.mkdirs(); } // 临时文件目录 File tempPathFile = new File("d:\\temp\\buffer\\"); if (!tempPathFile.exists()) { tempPathFile.mkdirs(); } try { // Create a factory for disk-based file items DiskFileItemFactory factory = new DiskFileItemFactory(); // Set factory constraints factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb factory.setRepository(tempPathFile);//设置缓冲区目录 // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // Set overall request size constraint upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB List<FileItem> items = upload.parseRequest(request);//得到所有的文件 Iterator<FileItem> i = items.iterator(); while (i.hasNext()) { FileItem fi = (FileItem) i.next(); String fileName = fi.getName(); if (fileName != null) { File fullFile = new File(fi.getName()); File savedFile = new File(uploadPath, fullFile .getName()); fi.write(savedFile); } } out.print("upload succeed"); } catch (Exception e) { e.printStackTrace(); } %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> </body> </html> 示例4 利用Servlet来实现文件上传。 Upload.java package com.zj.sample; import java.io.File; import java.io.IOException; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; @SuppressWarnings("serial") public class Upload extends HttpServlet { private String uploadPath = "D:\\temp"; // 上传文件的目录 private String tempPath = "d:\\temp\\buffer\\"; // 临时文件目录 File tempPathFile; @SuppressWarnings("unchecked") public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { try { // Create a factory for disk-based file items DiskFileItemFactory factory = new DiskFileItemFactory(); // Set factory constraints factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb factory.setRepository(tempPathFile);// 设置缓冲区目录 // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // Set overall request size constraint upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB List<FileItem> items = upload.parseRequest(request);// 得到所有的文件 Iterator<FileItem> i = items.iterator(); while (i.hasNext()) { FileItem fi = (FileItem) i.next(); String fileName = fi.getName(); if (fileName != null) { File fullFile = new File(fi.getName()); File savedFile = new File(uploadPath, fullFile.getName()); fi.write(savedFile); } } System.out.print("upload succeed"); } catch (Exception e) { // 可以跳转出错页面 e.printStackTrace(); } } public void init() throws ServletException { File uploadFile = new File(uploadPath); if (!uploadFile.exists()) { uploadFile.mkdirs(); } File tempPathFile = new File(tempPath); if (!tempPathFile.exists()) { tempPathFile.mkdirs(); } } } demo4.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>File upload</title> </head> <body> // action="fileupload"对应web.xml中<servlet-mapping>中<url-pattern>的设置. <form name="myform" action="fileupload" method="post" enctype="multipart/form-data"> File:<br> <input type="file" name="myfile"><br> <br> <input type="submit" name="submit" value="Commit"> </form> </body> </html> web.xml <servlet> <servlet-name>Upload</servlet-name> <servlet-class>com.zj.sample.Upload</servlet-class> </servlet> <servlet-mapping> <servlet-name>Upload</servlet-name> <url-pattern>/fileupload</url-pattern> </servlet-mapping>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值