自定义input文件上传 file的提示文字及样式

简单记录一下

效果图:

代码:

1 <input class="aload" type=‘button‘ value=‘上传附件‘ onClick=‘javascript:$("#hiddenFile").click();‘ />
2 <input id=‘showFileName‘ type=‘text‘ readonly style="border: none;"/>&nbsp;&nbsp;
3 <input id=‘hiddenFile‘ type=‘file‘ style="display:none" onchange=‘ophiddenFile();‘ />

js code:

1 function ophiddenFile() {
2    var dd = $("#hiddenFile").val().split("\\");
3     $("#showFileName").val(dd[dd.length - 1]);
4  }

原文地址:https://www.cnblogs.com/lstory/p/8425959.html

时间: 2024-10-25 13:49:49

自定义input文件上传 file的提示文字及样式的相关文章

文件上传file upload

使用fileupload组件实现文件上传: 导入 commons-fileupload-1.2.2.jar commons-io-2.1.jar 官方文档: // Check that we have a file upload request 检测是否有文件上传的请求boolean isMultipart = ServletFileUpload.isMultipartContent(request);/**********************************************

.netCore Swagger 文件上传的友好提示

本人使用的是ABP netcore +Swagger环境.在这之前,网上搜索到的解决方案都没有解决我的问题,swaggerUI上IFromFile内部的属性都展示到swagger上了.网上解决的方法大同小异,在这就贴一篇作为比较http://www.cnblogs.com/intotf/p/10075162.html使用效果前: 使用后效果: 话不多说,直接上代码 Swagger选项过滤器代码 using Microsoft.AspNetCore.Http; using Swashbuckle.

Django处理文件上传File Uploads

HttpRequest.FILES 表单上传的文件对象存储在类字典对象request.FILES中,表单格式需为multipart/form-data <form enctype="multipart/form-data" method="post" action="/foo/"> <input type="file" name="image" /> request.FILES中的键

input 文件上传标签响应很慢问题解决

<input type="file" accept="image/*"> 当input的accept属性值为image/*时,谷歌下点击上传文件需要等几秒钟才会出现,ie下却没有这个问题. 经查找参考http://www.tuicool.com/articles/vYfYVnf , 发现是input的accept属性与Webkit浏览器引发的问题.解决方案为修改accept为指定类型: <input type="file" ac

input 文件上传实现本地预览

上传图片 本地预览 获取图片大小 上传视频 本地预览 获取视频 duration 视频大小 图片上传 主要涉及内容 input accept filesList URL.createObjectURL() URL.revokeObjectURL() input file <label for='upload'></label> // ::before :: after 用于扩展可点击区域 <input type="file" id="upload

input文件上传,修改样式以及限制文件格式

<form id="importForm" class="form-horizontal" action="../image/uploadimg.shtml" method="post" enctype="multipart/form-data" style="margin:0;"> <div class="textfile-box" style=&

Volley源码分析之自定义MultiPartRequest(文件上传)

本篇内容目录: 使用HttpURLConnection上传文件到服务器案例 自定义支持文件上传的MultiPartRequest Web后台接收文件的部分代码 先来看下HttpURLConnection来文件上传的案例: 1.传送数据到服务器,必定是使用POST请求: //设置请求方式为post httpURLConnection.setDoOutput(true); httpURLConnection.setRequestMethod("POST"); 2.上传文件的HTTP请求中的

调查管理系统 -(8)增加Logo--Struts2文件上传

1.增加Logo 增加Logo即上传图片,因此使用到Struts2的文件上传功能.Struts2的文件上传依靠其FileUploadInterceptor(文件上传拦截器),其使用的依然是Apache提供的FileUpload文件上传组件(commons-fileupload.jar). 2.Struts2文件上传的使用步骤 Ⅰ.在 Jsp 页面的文件上传表单里使用 file 标签.如果需要一次上传多个文件,就必须使用多个 file 标签,但它们的名字必须是相同的. Ⅱ.在 Action 中新添

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖