input file上传图片

最新推荐文章于 2022-01-13 14:05:52 发布
最新推荐文章于 2022-01-13 14:05:52 发布
阅读量416 收藏
点赞数
分类专栏： Web前端（Art） Pharos(小白路标) 文章标签： javascript jquery 上传图片

jquery：

[javascript] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. //头像上传预览  
  2.     $("#up").change(function() {  
  3.         var $file = $(this);  
  4.         var fileObj = $file[0];  
  5.         var windowURL = window.URL || window.webkitURL;  
  6.         var dataURL;  
  7.         var $img = $("#ImgPr");  
  8.         if(fileObj && fileObj.files && fileObj.files[0]){  
  9.         dataURL = windowURL.createObjectURL(fileObj.files[0]);  
  10.         $img.attr('src',dataURL);  
  11.         }else{  
  12.         dataURL = $file.val();  
  13.         var imgObj = document.getElementById("ImgPr");  
  14.         imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  15.         imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;  
  16.             
  17.         }  
  18.     });  
html：

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <div class="picbtn"><img id="ImgPr" src="images/neik.png"</div>  
  2. <a class="chooseimg" href="#"><input type="file" id="up">从手机相册中选择</a>  
js:

[javascript] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. function $$(obj) {  
  2.     return document.getElementById(obj);  
  3. }  
  4. function upload(f){  
  5.        
  6.     var str = "";  
  7.     for(var i=0;i<f.length;i++){  
  8.         var reader = new FileReader();  
  9.         reader.readAsDataURL(f[i]);  
  10.         reader.onload = function(e){  
  11.             str+="<img src='"+e.target.result+"'/>";  
  12.             $$("dd").innerHTML = str;  
  13.         }  
  14.     }  
  15.    
  16. }  

html:

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <input id="load" type="file" onchange="upload(this.files)" multiple/>  
  2. <div id="dd"></div>  

兼容ie6-9，FF

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.         <body>  
  4.                 <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">  
  5. <p>  
  6. <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>  
  7. </p>  
  8. <script>  
  9. function setImagePreview() {  
  10.         var docObj=document.getElementById("doc");  
  11.    
  12.         var imgObjPreview=document.getElementById("preview");  
  13.                 if(docObj.files &&    docObj.files[0]){  
  14.                         //火狐下，直接设img属性  
  15.                         imgObjPreview.style.display = 'block';  
  16.                         imgObjPreview.style.width = '300px';  
  17.                         imgObjPreview.style.height = '120px';                      
  18.                         //imgObjPreview.src = docObj.files[0].getAsDataURL();  
  19.   
  20.       //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式    
  21.       imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  
  22.   
  23.                 }else{  
  24.                         //IE下，使用滤镜  
  25.                         docObj.select();  
  26.                         var imgSrc = document.selection.createRange().text;  
  27.                         var localImagId = document.getElementById("localImag");  
  28.                         //必须设置初始大小  
  29.                         localImagId.style.width = "300px";  
  30.                         localImagId.style.height = "120px";  
  31.                         //图片异常的捕捉，防止用户修改后缀来伪造图片  
  32. try{  
  33.                                 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  34.                                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
  35.                         }catch(e){  
  36.                                 alert("您上传的图片格式不正确，请重新选择!");  
  37.                                 return false;  
  38.                         }  
  39.                         imgObjPreview.style.display = 'none';  
  40.                         document.selection.empty();  
  41.                 }  
  42.                 return true;  
  43.         }  
  44. </script>  
  45. </body>  
  46. </html> 



声明：二次转载，未发现原著地址，请见谅！

Footloose_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端图片上传那些事儿
HuaZi_Myth的博客
10-29 551
本文讲的图片上传，主要是针对上传头像的。大家都知道，上传头像一般都会分成以下 4 个步骤： 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 接下来，就详细的介绍每个步骤具体实现。 选择图片 选择图片有什么好讲的呢？不就一个 input[type=file] ，然后点击就可以了吗？确实是这样的，但是，我们想要做得更加的友好一些，比如需要过滤掉非图片文件，...
input上传图片并且实现预览
weixin_45757134的博客
06-11 6555
文章目录前言一、确定思路二、书写代码1.HTML部分2.CSS部分3.JS部分（重点）3.1.点击选择图片按钮，调用input文件框事件的的代码3.2.转换格式3.3.发送图片给后端 前言 在网站中，上传图片这个功能，这个还是挺常见的。比如说：在填写信息中，上传头像中。 提示：以下是本篇文章正文内容，下面案例可供参考 一、确定思路 整个功能，大致可以分为三个步骤。 点击选择图片的按钮，从本地选择一张图片。（选图片） 选择好之后，会进行预览。就好比自己微信要换头像，选择好之后，都会有预览的步骤。（预
jquery的input:type=file实现文件上传
weixin_34220963的博客
05-04 389
1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;title&gt;html5_2.html&lt;/title&gt; 5 &lt;style&gt; 6 #up{ 7 z-index: 19891015; 8 w...
【前端解决方案】input file 上传图片，并实现实时预览
Yuu
11-12 8049
前言 我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 input 标签上传的图片。一般的 &lt;input type="file’ /&gt; 标签是不能实现实时预览的。 解决方案 可以通过 file 标签和 js 的 FileReader 接口来实现。 把选择的图片文件调用 readAsDataURL 方法 把图片数据转成 base64 字符串形式显示在页面上 htm...
jquery input-file不用form实现多文件自动上传
折菊的博客
11-01 4381
01前言 最近项目上用到了input-file的文件上传，到了跟后台交互的步骤。遂去百度看看前端代码应该如何书写。发现百度上有两种方式，一是input file包裹在form元素内，利用表单元素提交实现发送文件内容到服务器；二是利用formData对象，将文件流与文件名作为键值对形式存入该对象，在发送给服务器。两种都可行，我在此使用第二种，但是百度多是默认上传一个文件，遂自己改造改造实现多文件上传...
input file上传图片预览
12-30
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
input file上传 图片预览功能实例代码
09-01
在网页开发中，图片预览功能是一个非常实用且常见的需求，尤其在文件上传场景中，用户在选择图片之前能够预览图片...希望这个讲解对你理解input file上传预览功能有所帮助，如果你有更多问题或建议，欢迎提问和交流。
javascript实现input file上传图片预览效果
10-23
主要介绍了javascript实现input file上传图片预览效果，感兴趣的小伙伴们可以参考一下
利用 JQuery Input file 实现单文件上传
weixin_30551963的博客
11-12 1090
引用 jquery.form.js 文件利用JQuery Input file 实现单文件上传效果如下 初始按钮点击按钮 弹出 选中框 页面代码： <a class="btn" style="background-image: url(img/btnbg_minidept.png);"> <input type="file" id="fileMiniDep...
JS input file图片上传预览效果
微微一芯的博客
04-21 1957
首先，可以先了解file 和FileReader 的API，在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。所有type属性(attribute)为file的元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(inde
Vue、JavaScript：實時更換照片
weixin_30924239的博客
03-29 111
Vue.js： HTML： <input @change='getImg(event)' type="file" ref="ifile" name="" id=""> <img :src="imgSrc" alt=""> JS： getImg:function(ele){ var that=this; if (window.File...
input上传图片file
qq_39969987的博客
12-25 207
方法一： <input type="file" name="id_bank" class="layui-input" accept="image/jpg,image/jpeg,image/gif,image/png" onchange="imgChange(event,'id_bank')"> <img src="" alt="" id="id_bank"> funct...
HTML inputFile实现头像上传
qq_41533659的博客
01-13 1054
C#结合HTML实现图片上传 效果预览 HTML <table> <tr> <td rowspan="5" style="background:#ffffff"> <div style="height:140px;width:140px;border-radius:50px;text-align:center;margin:0 auto;">
jq ajax input file,基于jq的input file文件上传
weixin_39605296的博客
08-05 739
input file文件上传很多人都遇见过，就样式问题就有一大堆的问题，默认样式实在是不敢恭维，但在此今天不讨论样式的问题，只给一个大致的思路，一个div包括一个span和一个input，分别设置两个的定位，然后给input设置opacity为0，设置好宽度充满div，在设置好span的样式即可。众所周知，ajax不能传递文件，但是html的formdata可以。html代码1234567选择本地...
input上传图片并预览
热门推荐
PresByter的博客
10-23 9万+
首先说一下input 大家都知道上传文件，图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file">；在页面的样式是不可以更改的，如下图 但是最为一个投机取巧的前端，一切样式都是可以修改的。 效果图如下 代码： <input type="file" n
HTML5 input file 图片上传，压缩，上传，预览
qq_16591861的博客
07-03 3383
上传 预览框 $('#textfile').on('change', function() {         var reader = new FileReader();//新建获取file的读取文件         var imgsrc = null;          var _file = this.files[0],  //获取的的图片             f
jQuery 限制<input type="file">上传文件大小
Tie_laosan的博客
04-26 2712
获取上传文件的大小，单位是字节 var size = $("input[type=file]").get(0).filles[0].size;
input file本地图片预览的方法（兼容IE、Chrome和Firefox）
yippeelyl的专栏
09-16 2万+
input选择图片实现预览本地图片的方法，网上有很多，但是不能很好的兼容多种浏览器，这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码： input选择图片实现预览本地图片的方法，网上有很多，但是不能很好的兼容多种浏览器，这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码：                  
前端input标签上传图片
最新发布
06-06
前端input标签上传图片可以使用type属性为file的input标签，并设置accept属性为image/*，代码如下： ``` <input type="file" accept="image/*"> ``` 此时用户点击该input标签即可选择本地的图片进行上传。在提交...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值