精华内容
下载资源
问答
  • js清空input file的值

    万次阅读 多人点赞 2017-08-07 16:11:15
    今天在做选择本地图片上传的功能时遇到一个问题,第一次选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,这个过程没有问题,问题出在当把创建的img元素节点删除后,再点file控件选中同一个...

    在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img元素节点删除后,再点file按钮选择同一个文件后发现图片并没有被重新创建出来。

    分析了原因:因为上一次选择的文件与本次选择的是同一个文件,两次的路径值相同,值没有改变所以导致file不会触发onchange事件,因此需要每次创建完img后重置file的value或者重置file的dom来解决这个问题。

    解决方法一:
    每次创建完img后把file的value值重置为空字符串

    var file = document.getElementById('file');
    file.value = ''; //file的value值只能设置为空字符串
    

    注意:浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值,强制修改会报以下错误:

    VM4061:1 Uncaught DOMException: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string.

    解决方法二:
    每次创建完img后把file的outerHTML重置

    var file = document.getElementById('file');
    file.outerHTML = file.outerHTML; //重置了file的outerHTML
    
    展开全文
  • input file美化

    千次阅读 2016-07-11 22:56:58
    input file太丑了,所以美化那是势在必行的。方法很多种。我就介绍两种方法.1.利用一个按钮去触发input file。 如图: html代码:<input type="text" id="show-path" style="height: 30px"/> 选择文件 <input ...

    ==> 学习汇总(持续更新)
    ==> 从零搭建后端基础设施系列(一)-- 背景介绍


    input file太丑了,所以美化那是势在必行的。方法很多种。我就介绍两种方法.

    1.利用一个按钮去触发input file。
    如图:

    html代码:

    <input type="text" id="show-path" style="height: 30px"/>
    <button style="height: 36px" id="btn">选择文件</button>
    <input type="file" id="upload" style="display: none;" />
    

    js代码

    window.onload = function ()
    		{
    			$('btn').onclick = function ()
    			{
    				$('upload').click();  //通过按钮触发input file的click事件
    			};
    			$('upload').onchange = function ()
    			{
    				$('show-path').value = this.value;  //获取文件伪路径
    			}
    
    		};
    		function $(id)
    		{
    			return document.getElementById(id);
    		}
    

    2.利用div把input file和图片或者按钮包起来
    原理如下:用一个div把input file包起来,然后再加一个背景图片,然后把input file的大小设为100%就是整个div的大小,再设置它的透明度为零(不能隐藏,否则点击的时候就点击不到了)。最后设置z-index为最高。当点击div的时候就相当于点击了input file。

    效果如图:

    html代码如下:

    <div id="div1">
            <div id="div2"><input type="text" id="show" /></div>
            <div id="div3">
                <input type="file" id="upfile" />
                <span class="text">选择文件</span>
            </div>
        </div>
    

    css代码

     #div1{width:550px;height:38px;position: relative;margin:40px auto;}
        #div2{float: left;}
        #div2 input {width:250px;height: 35px;font-size: 22px;}
        #div3{float:left;width:140px;height:38px;position: relative;
            background: url("upload.jpg") no-repeat 0 0;margin-left: 5px;}
        #div3 input{position: absolute;width:100%;height: 100%;top:0;left: 0;
            z-index: 1;opacity:0;}
        .text{display: block;width:140px;height: 38px;position: absolute;top: 0;
            left:0;text-align: center;line-height: 38px;font-size: 28px;
            color: orchid;}
        #div3:hover{background: url("upload.jpg") no-repeat 0 -40px;}
    

    js代码:

    window.onload = function ()
            {
                //当选择文件后,会触发这个事件
                $('upfile').onchange = function ()
                {
                    $('show').value = this.value;//把获取到的文件伪路径传到编辑框
                }
    
            };
            function $(id)
            {
                return document.getElementById(id);
            }
    

    那个获取的路径是一个伪路径,不是真实的路径。只有文件名是对的。如果是老的浏览器如IE 5 6就会显示真实路径,但是为了安全,高级的浏览器都会隐藏真实的路径.

    展开全文
  • input file上传图片预览

    热门讨论 2015-12-30 12:57:12
    input file上传图片预览
  • 修改input file 原始样式,img标签/button覆盖原始上传样式,input file @change传值input file 原始样式很丑,实际使用中需要将其修改为符合当前项目的风格,本文以上传图片为例个人项目效果,红色框中的就是按钮,...

    input file 原始样式很丑,实际使用中需要将其修改为符合当前项目的风格,本文以上传图片为例

    个人项目效果,红色框中的就是按钮,点击后调用摄像头或者本地文件夹上传 证件照片,后台处理返回结果前端自动反写

    在这里插入图片描述

    input file 原始样式

    <input type="file" id="fileup">
    
    效果如下:

    在这里插入图片描述

    img标签覆盖原始上传文件样式

        <label>
            <img src="../img/radio.png">
            <input type="file" id="upimg"/>
        </label>
    
    CSS如下:
        #upimg{
            display: none;
        }
    
    效果如下:点击图片(32*32)就可以选择要上传的文件

    在这里插入图片描述

    button 覆盖原始上传文件样式

        <label>
            <input type="button" id="photobtn" value="选择文件">
            <input type="file" id="fileup">
        </label>
    
    css如下:
        #fileup{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        #photobtn{
             background: darkgreen;
             color: #FFF;
             border-radius: 5px;
         }
    
    效果如下:点击绿色按钮便可选择文件

    在这里插入图片描述

    input file @change 传值(这里传了三个参数)

       <label>
           <img src="../img/radio.png">
           <input type="file"  id="fileup" @change="test($event,i,o)"/>
       </label>
    
    	methods:{
    		test(event,value,o){
    			处理代码写在这里......
    		}
    	}
    

    本文为原创,转载请注明出处,谢谢!

    展开全文
  • input file 修改按钮名称

    万次阅读 2016-02-26 18:51:44
    input file 修改按钮名称 input file


    1.



    <input type="file" id="inputFile" name="inputFile" style="display:none" onchange="changeAgentContent()" />
    <input type="text" value="" disabled id="inputFileAgent" />
    <input type="button" onclick="document.getElementById('inputFile').click()" value="Browse..." />
    <script type="text/javascript">
        function changeAgentContent(){
            document.getElementById("inputFileAgent").value = document.getElementById("inputFile").value;
        }
    </script>





     2.


    <form name="form1"> 
    <input type="file" name="picpath" id="picpath" style="display:none;" onChange="document.form1.path.value=this.value"> 
    <input name="path" readonly>
    <input type="button" value="上传照片" οnclick="document.form1.picpath.click()">

     </form>




    展开全文
  • js修改input file标签样式

    千次阅读 2018-03-23 19:50:11
    在进行文件上传得过程中,通常需要用到input file 标签,但是由于其默认的表单元素丑陋的外观,你们是不是非常地想吐槽,想大刀阔斧地修改成你自己的所需要的样式呢? 今天我在做上传的时候,也遇到了这个问题,...
  • 使用input file 上传图片并显示

    万次阅读 2017-11-21 17:04:33
    使用input file 上传图片并显示
  • iOS 报错 Build input file cannot be found:

    千次阅读 2019-03-19 10:25:39
    如图错误信息:2036487.png) Build input file cannot be found: 文件没有被发现但是Build Pases 里面copy 却有。 解决:如图 第一步找到: 第二步:把它删除重新编译 ...
  • js获取input file路径改变图像地址

    千次阅读 2016-08-19 14:10:13
    html, input file, file, 获取input file路径, js
  • 【Html】清空Input file数据

    千次阅读 热门讨论 2017-11-20 14:30:47
    清除input file标签中的数据方法。
  • 清空input file中的值

    千次阅读 2018-06-15 10:47:57
    清空input file中的值 对于input type为file元素: 未选择文件之前,它是这个样子: 当选择文件名为index.html的文件后,它变成了这个样子,input元素会显示文件名信息:   有时候在选择上传文件...
  • bootstrap中inputfile 中文设置

    千次阅读 2018-06-22 16:24:05
    1.引入bootstrap 中所需的静态文件和fileinput所需的依赖样式引用去掉input file 中的class="file",否则会不成功当去掉class="file"之后会出现input 的样式没了,因此需要在&lt;script&...
  • input file隐藏以及 input file选中预览

    千次阅读 2018-07-03 10:43:21
    身为一个后端程序猿,在做项目的时候和前端是分不开的,记录一下我正在使用的前端小方法&lt;img src="...input id="img-upload" type="file" name="image"
  • 解决PHP报错No input file specified

    千次阅读 2018-08-27 17:55:23
    原文链接:解决PHP报错No input file specified   No Input File Specified 说明没有找到要执行的php文件路径,由SCRIPT_FILENAME参数传递。 解决方案一: 更改php.ini:cgi.fix_pathinfo=1 但是存在安全性...
  • no input file specified 解决方法

    万次阅读 2018-02-23 14:25:07
    (一)IIS Noinput file specified方法一:改PHP.ini中的doc_root行,打开ini... cgi.force_redirect = 1去掉前面分号,把后面的1改为0即cgi.force_redirect = 0(二)apacheNo input file specifiedapache No input f...
  • input file读取文件

    千次阅读 2018-12-20 11:25:24
    js读取 input file 文件的两种方式: &lt;div id="localImag"&gt; &lt;img id="preview" src="" width="150" height="180" style="display:...
  • 前言     实现选择文件并上传的功能时,都会用到 ...input id="inputFile" type="file" />     input[file]标签的accept属性可用于指定上传文件的 MIME类型 。  ...
  • No input file specified. phpStudy nginx报错解决方案 排查1:检查这个目录是否存在,路径是否错误 排查2:vhost.conf配置文件 server { listen 80; server_name www.gdy.com gdy.com; root "C:\work-...
  • 使用BootStrap Inputfile 遇到的问题

    千次阅读 2017-08-17 23:48:39
    使用BootStrap Inputfile 遇到的问题前言:项目开发完成需要一个文件上传的功能,使用普通的“type=file”很快就完成了,趁着时间还充裕尝试使用界面美观,功能强大的Bootstrap Inputfile插件完成,由于很久没写前段...
  • 监测input file的事件

    千次阅读 2017-04-14 18:40:57
    今天要写个监听input file是否选中文件的事件,之前写过监测input值的变化事件,如下: $("input").bind('input porpertychange', function () { // getSumGrade(); }); 这个方法不能监测file的变化,百度了...
  • 使用js获取input file的路径

    万次阅读 2018-01-31 21:38:10
    页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签; 但当通过js的onchange事件动态获取input file 的路径的时候,发现console.log(pa
  • 修改input file控件默认浏览文字

    千次阅读 2016-11-14 10:24:49
    修改input file控件默认浏览文字 div.file{display:inline-block;width:100px;height:20px;line-height:20px;position:relative;overflow:hidden;color:red} div.file input{position:absolute;left:0px;top:0px;...
  • 用ajax发送input file文件

    千次阅读 2019-01-31 10:12:00
    获取input file的文件对象 $(&quot;input[type=file]&quot;).change(function(e){ file = e.currentTarget.files[0]; }) e.currentTarget.files[0]是个对象,ajax默认不能发送对象,要通过JSON....
  • input file 如何上传同一个文件

    千次阅读 2018-12-15 16:44:10
    在一个事件(比如点击图片)内使用input file的click()。主动触发click(),弹出文件选择。 let uploadInput = $('.upload input'); //jQuery委托 .clsPhoto的点击事件 $('.imgWrapper').on('click', '.clsPhoto', ...
  • 把之前码云上面的项目打包下载下来准备搭建到本地上重新熟悉熟悉,但是将代码解压到正确的文件夹下,并使用相关域名出现No input file specified现象,在网上搜索了很多相关的资料,最后还是不行,最后搜索到宝塔 no...
  • No input file specified. Apache解决方案

    千次阅读 2020-09-08 11:39:24
    新部署的项目,提示出现“No input file specified.” 如下图所示: 原伪静态规则 调整后的伪静态规则 调整代码 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On ...
  • 不依赖input file标签上传图片

    千次阅读 2018-11-24 15:26:21
    不用input file,就是不想去选文件,我就要用固定的图片上传,这个固定可能是固定的某一张图片,也可能是固定策略生成的图片(每次都生成,但每次都不一样,比如聊天截图。。。)。 第一种方式:图片转canvas -----》...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 963,610
精华内容 385,444
关键字:

Inputfile