精华内容
下载资源
问答
  • 原本的input type='file' 样式真的很丑,毫无美感而言,一直想写一个点击图片显示的界面,现在终于研究出来了。原本的input type='file'样式:改变后的样式:样式代码: <style type="text/css"&...

    原本的input type='file' 样式真的很丑,毫无美感而言,一直想写一个点击图片就显示的界面,现在终于研究出来了。

    原本的input type='file'样式:

    改变后的样式:

    样式代码:

        <style type="text/css">
            li{list-style-type: none;margin-right: 10px;}
    	 	ul li{float: left;}
            .img{opacity:0;}
            .imgs{border:1px solid #78C3F3;background: #AADFFD;color: #1E88C7;border-radius: 4px;text-align:center;cursor: pointer;
                padding:10px;}
            
        </style>

    前端代码:

    <ul class="iconlist">
                <li><div class="imgs" onclick="document.getElementById('img_1').click()">选择图片</div>
                        <input type="file" class="img" name="img[]" id="img_1" accept="image/*" onchange="l(this)"/></li>
                <li><div class="imgs" onclick="document.getElementById('img_2').click()">选择图片</div>
                        <input type="file" class="img" name="img[]" id="img_2" accept="image/*" onchange="l(this)"/></li>
                <li><div class="imgs" onclick="document.getElementById('img_3').click()">选择图片</div>
                        <input type="file" class="img" name="img[]" id="img_3" accept="image/*" onchange="l(this)"/></li>
                <li><div class="imgs" onclick="document.getElementById('img_4').click()">选择图片</div>
                        <input type="file" class="img" name="img[]" id="img_4" accept="image/*" onchange="l(this)"/></li>
                <li><div class="imgs" onclick="document.getElementById('img_5').click()">选择图片</div>
                        <input type="file" class="img" name="img[]" id="img_5" accept="image/*" onchange="l(this)"/></li>
                <li><div class="imgs" onclick="document.getElementById('img_6').click()">选择图片</div>
                        <input type="file" class="img" name="img[]" id="img_6" accept="image/*" onchange="l(this)"/></li>
            </ul>

    显示图片的代码:

    <ul class="iconlist">
                    <li><div width="225px"><img src="" width="225px" id="1"/></div></li>
                    <li><div width="225px"><img src="" width="225px" id="2"/></div></li>
                    <li><div width="225px"><img src="" width="225px" id="3"/></div></li>
                    <li><div width="225px"><img src="" width="225px" id="4"/></div></li>
                    <li><div width="225px"><img src="" width="225px" id="5"/></div></li>
                    <li><div width="225px"><img src="" width="225px" id="6"/></div></li>
                </ul>

    JS代码:

    <script type="text/javascript">
    
            function l(evn){
                var name = event.target.files[0].name;//获取上传的文件名
                var divObj= $(evn).prev()  //获取div的DOM对象
                $(divObj).html(name) //插入文件名
                var id = $(evn).attr('id');//获取id
                var num = id.substr(4,1)
                var file = event.target.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件
                    reader.onloadend = function (e) {
                        $("#"+num).attr("src",e.target.result);    //e.target.result就是最后的路径地址
                    };
                }
            }
        </script>

    效果如下:
     

    注:js方法中用了jQuery的方法,需引入jQuery 

    展开全文
  • //获取图片的路径,该路径不是图片在本地的路径 if (objUrl) { $("#pic").attr("src", objUrl); //将图片路径存入src中,显示图片 var items = $(this)[0].files; var fileName = items[0].name; // 获得...

    1.dom元素

    <div class="pic_box">
    	<img src="img/head.jpeg" id="pic" />
    </div>
    <table class="tables">
    	<thead>
    		<tr>
    			<td>文件名</td>
    			<td>大小</td>
    			<td>类型</td>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td id="name"></td>
    			<td id="size"></td>
    			<td id="type"></td>
    		</tr>
    	</tbody>
    </table>
    <input type="file" class="pic_upload" id="upload" />
    		

    2.js编写

    $(".pic_box").click(function(){
    	$("#upload").click();
    });
    			
    $("#upload").on("change", function() {
        var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径
    	if (objUrl) {
    	    $("#pic").attr("src", objUrl); //将图片路径存入src中,显示出图片
    	    var items = $(this)[0].files;
    	    var fileName = items[0].name; // 获得文件名
    	    var fileSize = items[0].size; // 获得文件大小 
    	    var fileType = items[0].type; // 获得文件类型
    	    $("#name").html(fileName);
    	    $("#size").html(fileSize+"bytes");
    	        $("#type").html(fileType);
    	}
    });
    	        
    function getObjectURL(file) {  //获得url
    	var url = null ;
    	if (window.createObjectURL!=undefined){ // basic
    		url = window.createObjectURL(file) ;
    	}else if (window.URL!=undefined){
    		// mozilla(firefox)
    		url = window.URL.createObjectURL(file);
    	}else if (window.webkitURL!=undefined) {
    		// webkit or chrome
    		url = window.webkitURL.createObjectURL(file) ;
    	}
    		return url ;
    }

    3.效果展示

    展开全文
  • 1、input type='file' 上传文件时显示文件名及上传进度function showPreview(source) {var arrs = $(source).val().split('\\'); var filename=arrs[arrs.length-1]; $(".show").html(filename);var file = source....

    1、input type='file' 上传文件时显示文件名及上传进度

    function showPreview(source) {

    var arrs = $(source).val().split('\\'); var filename=arrs[arrs.length-1]; $(".show").html(filename);

    var file = source.files[0];

    var total = file.size; if(window.FileReader) {

    var fr = new FileReader();

    fr.onprogress = function(e) { $(".progress1").show();

    $("#Progress").val((e.loaded/total)*100) };

    fr.οnabοrt=function () {

    layer.msg("文件上传中断,请重试")

    };

    fr.οnerrοr=function () {

    layer.msg("文件上传出错,请重试")

    };

    fr.οnlοad=function () { $(".progress1").hide();

    layer.msg("文件上传成功")

    };

    fr.readAsDataURL(file);

    }

    }

    本文来源于网络:查看 >https://blog.csdn.net/qq_36687640/article/details/78551217

    展开全文
  • 点击图片实现更换头像的功能,并且可以得到上传图片文件名,大小,类型。
  • Layui实现文件上传的各种方式,拖拽,直接上传,格式限制上传Layui的官方文档中都有详细的说明以及实例,困扰我的就是如何让选择文件没上传之前将文件名显示在文本框内。 如图: <input type="text" ...

    Layui实现文件上传的各种方式,拖拽,直接上传,格式限制上传等等在Layui的官方文档中都有详细的说明以及实例,困扰我的是如何在选择文件没上传之前将文件名显示在文本框内。

    如图:

    基本上就是设置一个输入框,然后增加一个placeholder属性,指引别人点击右侧浏览,然后把文本框禁止输入。 代码如下,我们给一个id="name"。

    <input type="text" readonly="readonly" name="title" required lay-verify="required"
                               placeholder="请点击右侧浏览"
                               autocomplete="off" class="layui-input" id="name">


    下面是js:

    , choose: function (obj) {
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            console.log(obj)
    
            //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                console.log(index); //得到文件索引
                console.log(file); //得到文件对象
                console.log(result); //得到文件base64编码,比如图片

    console.log()打印出拿到的file,我们打开浏览器的控制台可以看到file里面已经抓到了图片名name:

     

    那么我们在js文件里面加上

     document.getElementById('name').value = file.name
    
    //name 是input框的id
    //file.name 是刚刚拿到的数据

    放在下列位置

      //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                console.log(index); //得到文件索引
                console.log(file); //得到文件对象
                console.log(result); //得到文件base64编码,比如图片
                //获取文件名***************************
                document.getElementById('name').value = file.name

    下面是关于文件上传完整的的JS代码:

    upload.render({
        elem: '#test8'
        , url: 'https://httpbin.org/post' //改成您自己的上传接口
        , auto: false
        //,multiple: true
        , bindAction: '#test9'
        , choose: function (obj) {
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            console.log(obj)
    
            //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                console.log(index); //得到文件索引
                console.log(file); //得到文件对象
                console.log(result); //得到文件base64编码,比如图片
                //获取文件名***************************
                document.getElementById('name').value = file.name
    
    
                //这里还可以做一些 append 文件列表 DOM 的操作
    
                //obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
                //delete files[index]; //删除列表中对应的文件,一般在某个事件中使用
            });
        }
    
        , done: function (res) {
            layer.msg('上传成功');
            console.log(res)
        }
    });

     

    即可实现选择文件后文件名自动载入文本框

    展开全文
  • Windows 10 如何显示文件名后缀
  • jsp显示中文文件名图片:将Tomcat中的server.xml文件中改为,tomcat的server.xml以及与大家分享下显示绝对路径下的图片的方法
  • 最近做ca签名,key验证通过后传图片为base64格式图片,保存至自己服务器 (大概操作) 首先获取的src=“data:image/png;base64,sealBase64(获取到的参数)” function qr(){ var base64= $('#image').attr('src')...
  • 批量插入照片和对应文件名到excel表格中。 常用于图片概览、简介等。
  • 请教大侠,如图source insight 标题栏不显示文件名 ![图片说明](https://img-ask.csdn.net/upload/201504/29/1430239117_377894.png) 我们公司用的source insight下面这行标题栏下面会有一行显示打开的文件名...
  • FileName: 获取上传的文件名 HasFile: 是否选择(存在)上传的文件 ContentLength: 获得上窜文件的大小,单位是字节(byte)   方法: Server.MapPath(): 获取服务器的物理路径 SaveAs(): 保存文件到指定的...
  • 最近使用vue+elementUI的时候碰到一个需求,将某个表中每条记录对应的图片显示在表格中: 场景: 1.表格中的图片字段存储的是图片名称 2.图片存储另一个项目工程的资源文件夹中,so,通过路径直接访问是访问...
  • qlImageSize:QuickLookSpotlight插件可标题栏中显示图像的尺寸,大小DPI,而不是文件名。 还可以预览一些不受支持的格式,例如WebPbpg
  • 上传图片显示图片是Web开发中的一个重要环节。本文是个Django实战小项目,教你如何使用Django自带的通用视图(Generic View)实现图片的上传与显示。我们还会教你如何设置上传路径,以及动态地分配图片名。如果你还...
  • windows使用ftp上传文件到Linux,中文名称Linux系统中显示为乱码,怎么解决呢?今天小编抽空给大家分享CentOS 下中文文件名显示乱码问题的解决方法,需要的的朋友参考下
  • 图片文件的文件名图像 用于图片编号。
  • 1、input type='file' 上传文件时显示文件名及上传进度 function showPreview(source) { var arrs = $(source).val().split('\\'); var filename=arrs[arrs.length-1]; $(".show").html(filename); ...
  • 设想一个类似于Finder中的文件列表的表:表中第二项完整文件名是mobile-phone-screenshot-long-fine-name.png,但列不够大,无法显示完整的文件名。相反,我们看到的是mobile-phone-sc...g-fine-name.png。这个...
  • 选择'" type = "text" id="wj" name = "tzwhfj" style = "width:90%;...js中设置 $('#wj').filebox('setText',data.文件名); 不起作用,data.文件名是有数据的,在上传文件的文本框中,没有任何内容。 求大神帮忙
  • 如果两张照片的拍摄时间完全一样,就在文件名后累加数字 123… 区分: IMG_20210722_070707_1.jpg IMG_20210722_070707_2.jpg 代码 # photo time/name correction # 2021.05 @Wendell # 需求: # 1.
  • 电子-图片显示fatfs文件系统emwinSD卡支持长文件名支持中文文件名201762.rar,单片机/嵌入式STM32-F0/F1/F2
  • Extjs关于获取上传文件的格式和文件名

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 138,563
精华内容 55,425
关键字:

如何在图片上显示文件名和格式