js实现上传图片回显功能

用到h5技术

<img id="headimg" src="<%=path%>/resources/images/icon4.png" style="cursor:pointer;" height="90px;" width="95%;">
                    <input id="headurladd" type="file" name="headUrl1" onchange="readFile(this)" style="display: none;" />
                    <input type="hidden" name="headUrl" id="logo" value="" />

js如下:

$("#headimg").click(function(){
    addhead(‘headurladd‘);
});
function addhead(obj){
     $("#"+obj).click();
}

function readFile(obj){
    var file = obj.files[0];
    //判断类型是不是图片  
   /*  if(!/image\/\w+/.test(file.type)){     
            alert("请确保文件为图像类型");   
            return false;
    }    */
    var reader = new FileReader();
    
    reader.readAsDataURL(file);
    reader.onload = function(e){
        var imgBase64Data =encodeURIComponent(e.target.result);
        $("#headimg")[0].src=this.result;
         var res = (this.result);
         var pos = imgBase64Data.indexOf("4")+4;
         imgBase64Data = imgBase64Data.substring(pos);
         
         $(‘#logo‘).val(imgBase64Data);
        
    } 
}

时间: 2024-08-25 06:34:32

js实现上传图片回显功能的相关文章

JS实现单选按钮回显时页面效果出现,但选中单选框的值为空

最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取不能取的选中单选框的值(单选框取值有很多种方法,我的意思是有的能够取到,有的方法取不到). 想了很久,整理出一套看起来很复杂却非常实用的JS回显方法.试验了多种前端框架和浏览器,均好使.假设我们需要给name为gender,value为1的单选框进行回显: $("[name='gender'][va

上传图片回显,头像截取 SWFload areaSelect插件

1 @{ 2 ViewBag.Title = "Index"; 3 Layout = "~/Views/Shared/_LayoutPage.cshtml"; 4 } 5 6 @section head{ 7 8 <script src="~/Content/SWFUpload/swfupload.js"></script> 9 <script src="~/Content/SWFUpload/handle

关于JS将图片回显问题,将byte[]转化为流,信息填入input框内

1 <script> 2 3 var For_photo = [] 4 var normal_data = new Object(); 5 var Userinfo = JSON.parse(sessionStorage.getItem('Userinformation')); 6 for (var prop in Userinfo) { 7 //$("[name='" + prop + "']").val(ForeignTeachers[prop]);

&lt;select&gt;改造成&lt;s:select&gt;实现表单的回显功能

初始: <select name="viewType"> <option value="0">全部主题</option> <option value="1">全部精华帖</option> </select> 改造: <s:select name="viewType" list="%{ #{0:'全部主题' , 1:'全部精华帖} }&quo

【SSH项目实战】国税协同平台-25.查询条件回显

我们上次完成了信息发布管理模块的条件查询功能,但是我们有一些问题没有解决,比如信息的"回显"功能. 解释一下回显,例如你翻到100页,这一页有一个信息需要修改,当你点击修改并修改完毕的时候,发现并没有回到之前的第100页,而是回到了第1页!!你是不是就抓狂了?而且你在输入框中的的查询条件也可能改变或消失,这就是没有做数据回显的后果.所以,我们要为我们的这个模块做数据回显功能. 我们去分类查询的依据就是info.title值,如果有,我们就按照那个排序并列出结果,如果没有我们就去取所有的

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

使用Jersey构建图片服务器 有回显图片功能

1.前台界面代码 <form id="jvForm" action="add.do" method="post" enctype="multipart/form-data"> <table> <tr> <td width="20%" class="pn-flabel pn-flabel-h"></td> <td width

上传图片至fastdfs分布式文件系统并回显

事件,当我们浏览完图片选中一张时,触发onchange事件将图片上传到服务器并回显. 1 <img width="100" height="100" id="allUrl" src="${brand.imgUrl }"/> 2 <input type="hidden" name="imgUrl" id="imgUrl" value="${b

使用Dropzone上传图片及回显演示样例

一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12"> <form dropzone2 class="dropzone" enctype="multipart/form-data" method="post"></form> </div> </div&