`
iluoxuan
  • 浏览: 583418 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于 input type=file 事件屏蔽

 
阅读更多

·工作中遇到了一个有趣的问题:

<form>

 <em>+</em>

  <input  type=file ></input>

 <./form>

 

css中使得input框覆盖了+号; 当点击+号时平常的弹出选择文件,选到文件了现实文件名,+号变成-号

再按inpu框时 清楚已经选择的 文件

 

 

$(document).ready(function() {
	
var fileType = $('input[name="fileType"]').val();
var title=fileType == 'img' ? "插入图片":"添加附件";
inputChange(title);
	
function inputChange(title){
	$('input[type="file"]').change(function() {
		var ff = $(this).parent().parent();
		var fileName = $(this).val();
		if(fileName.indexOf("\\") > -1) {
			var startIndex = fileName.lastIndexOf("\\");
			fileName = fileName.substring(startIndex + 1, fileName.length);
		}
	    ff.attr("class","btn_delPic");
	    ff.children(':first').html("<em>-</em>" + fileName);
		$(this).html(fileName);
		inputClick($(this), title);

	});
   }
	
	function inputClick(obj, title){
		obj.click(function(){
			var name = obj.attr("name");
			obj.parent().parent().children(':first').html("<em>+</em>" + title);
			obj.parent().parent().attr("class","btn_addPic");
			obj.parent().html('<input class="filePrew" name='+name+' type="file"/>');
			inputChange(title);
			return false; 
		});
		
	}

});

 

分享到:
评论

相关推荐

    android webview input=file 失效解决方案

    然而,在使用Webview时,有时会遇到一个问题:当HTML页面中包含`&lt;input type="file"&gt;`用于上传文件的表单元素时,这个功能在Webview中可能无法正常工作。这通常是因为Android的安全策略限制了Webview对本地文件系统...

    Android WebView 不支持 H5 input type=”file” 解决方法

    通过网络搜索发现是因为 android webview 由于考虑安全原因屏蔽了 input type=”file” 这个功能 。 经过不懈的努力,以及google 翻译的帮助 在 stackoverflow 中找到了解决的方法。 具体可以理解为 重写webview 的...

    Android WebView 不支持 H5 input type="file" 解决方法

    这是因为 Android WebView 由于考虑安全原因屏蔽了 input type="file" 这个功能。 解决方法是重写 WebView 的 WebChromeClient,使用 ValueCallback&lt;Uri&gt; 来处理文件选择器的回调。首先,我们需要在 Activity 中...

    【JavaScript源代码】js实现上传图片功能.docx

    接下来,我们需要监听`&lt;input type="file"&gt;`标签的变化事件,以便在用户选择图片后能够读取并预览该图片。 ```javascript document.getElementById('file').addEventListener('change', function(event) { var ...

    js使用小技巧

    &lt;input type=text onkeypress="return event.keyCode&gt;=48&&event.keyCode&lt;=57||(this.value.indexOf(".")&lt;0?event.keyCode==46:false)" onpaste="return !clipboardData.getData("text").match(/D/)" ondragenter=...

    在b/s开发中经常用到的javaScript技术

    &lt;input type=file onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])"&gt; 画图: id=S style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px" height=240 width=392 classid="clsid:369303C2-D7...

    h5app拍照或者图库选择图片限制图片数量demo

    H5提供了多种API来支持这一功能,如`&lt;input type="file"&gt;`元素用于选择本地文件,以及FileReader API用于预览和处理用户选择的文件。此外,可能还涉及到File API,用于读取、操作和上传文件。 **详细知识点:** 1....

    在b/s开发中经常用到的javaScript技术整理

    &lt;input type="file" onchange="alert(this.value.match(/^(.*)(\\\.)(.{1,8})$/)[3])"&gt; ``` 这段代码会在用户选择文件后弹出一个对话框显示文件扩展名。 #### 4. 字符类 - **4.1 判断字符全部由a-Z或者是A-Z的...

    仿5X兴趣社区发帖

    前端可以通过HTML5的`&lt;input type="file"&gt;`来选择文件,并利用FileReader API读取和显示预览。若需裁剪,可以使用如Cropper.js这样的库。图片处理完成后,前端将处理后的文件发送到后端的UploadServlet进行实际的...

    如何进行WEB安全性测试.

    这个示例中的`&lt;input type="text" name="q" id="search_q" value=""/&gt;`表明`q`是用户可以输入的字段之一。 - **构造恶意SQL语句**:一旦找到了合适的输入点,就可以尝试向其中插入特殊构造的SQL语句片段,比如在...

    Dreamweaver试题(7).docx

    10. HTML代码`&lt;input type="text" name="address" size=30&gt;`表示创建了一个单行文本输入区域,选项B正确。 11. HTML文档中使用有序列表应使用`&lt;ol&gt;`标记,选项B正确。 12. `align=center`在HTML中表示文本或图片...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    XML越来越热,关于XML的基础教程网络上也随处可见。可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章。...

    cad全部命令

    TYPE input.txt | FIND "search string" &gt; output.txt ``` 6. **| 命令管道符** - 用来将一个命令的输出作为下一个命令的输入。 - 示例: ```batch DIR | FIND "test" ``` 7. **^ 转义字符** - 用来转义...

    课程ECMALL数据库分析.pdf

    - input_type:输入类型,如文本、选择框等。 - value_range:属性值范围。 - search_type:搜索类型。 - sort_order:排序顺序。 - if_link:属性值是否可链接。 8. **拍卖活动日志(ecm_auction_log)**: ...

    基于mediastreamer2的网络电话实现流程以及源码库

    error: /user/include/python2.7/pyconfig.h:15:52: fatal error: arm-linux-gnueabi/python2.7/pyconfig.h: No such file or directory compilation terminated. 分析::找不到arm-linux-gnueabi/python2.7/...

    在bs开发中经常用到的javaScript技术

    - **3.7 文件类型验证**:可以使用JavaScript检测用户上传文件的类型,例如通过`file.type`或`file.name`来判断。 ##### 4、字符类 字符验证包括对特定字符集的限制。 - **4.1 字母验证**:只允许大小写字母,...

Global site tag (gtag.js) - Google Analytics