结合yii上传做的图片上传后立即显示，自己琢磨的，有点low

<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
return true;
}

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
---这是一个单页面的图片上传后显示

琢磨琢磨这个页面。其实原理很简单，一个img标签，一个id 为dic的input标签，点击这个input标签，触动  setImagePreview（）方法，这个方法里写的是获取你上传图片的信息然后直接显示在img标签里

-----------------------------

整合yii框架，yii上传显示页面是这样写的  <?= $form->field($model, 'imageFile')->fileInput() ?>   可是我要整合在一起，我不知道怎么在这个里面给他个id，不知道怎么给他个onchange事件，于是乎，我在火狐上运行原先yii上传，firbug调试，找到这个<?= $form->field($model, 'imageFile')->fileInput() ?>解析以后是啥样子，发现就这么个小小的标签解析这么一堆东西

<div class="form-group field-uploadform-file">

<label class="control-label" for="uploadform-file">File</label>
<input type="hidden" value="" name="UploadForm[file]">
<input id="uploadform-file" type="file" name="UploadForm[file]">
<div class="help-block"></div>
</div>
这就简单了。这个解析后的上传按钮有 id="uploadform-file"，那我就用他的id，然后再给他个 onchange事件，并且把onchnage事件里面的js代码刚开始获取id为doc的input的内容改为获取id为uploadform-file的input的内容，然后把单页面上传显示的js粘过来，完后就是这个样子啦。。。
<?php
use yii\widgets\ActiveForm;
use yii\helpers\Url;
?>
<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>

<img id="preview" src="chuan.bmp" width="150" height="180" style="display: block; width: 150px; height: 180px;">

<div class="form-group field-uploadform-file">
      <label class="control-label" for="uploadform-file">File</label>
      <input type="hidden" value="" name="UploadForm[file]">
      <input id="uploadform-file" type="file" name="UploadForm[file]" onchange="javascript:setImagePreview();">
      <div class="help-block"></div>
      </div>

 
<?php ActiveForm::end() ?>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("uploadform-file");

var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
return true;
}

</script>

你原先的上传还能用哦   。。。有点low  看看就好了

yii点击上传图片后立即显示的更多相关文章

  1. ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）

    AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...

  2. Android编程 高德地图 中如何重写 定位按键 的触发事件 （com.amap.api.maps2d.LocationSource）点击定位后不仅定位在地图中心点上而且可以设置地图的缩放大小和提示

    在利用高德地图来编写自己的APP的时候,发现了一种对定位按键的重写方法,那就是利用   com.amap.api.maps2d.LocationSource  接口来重写. 什么是定位按键呢,下图中右 ...

  3. 使用Ueditor点击上传图片时显示延迟的问题

    最近在做一个项目,需要用到Ueditor,但是在点击上传图片的时候,总是隔了4-5秒才显示文件框 查了一些资料,最后发现,只需在 修改:(1) dialog/images/image.js 把imag ...

  4. 百度编辑器UEditor 点击上传图片选择框会延迟几秒才会显示 反应很慢(转)

    转自:http://www.blogxuan.com/php/show/323.html UEditor 编辑器点击上传文件选择框会延迟几秒才会显示,反应很慢,上传图片选择框显示很慢. 1.uedit ...

  5. element-ui 上传图片 后清空 图片 显示

    使用element-ui组件,用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.upl ...

  6. html上传图片后，在页面显示上传的图片

    html上传图片后,在页面显示上传的图片 1.html <form class="container" enctype="multipart/form-data&q ...

  7. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  8. kendo ui 富文本编辑控件 Editor 实现本地上传图片，并显示

    富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而 ...

  9. response 后刷新页面,点击按钮后，禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

随机推荐

  1. SQL语句的用法

    1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNc ...

  2. 使用ASP.Net WebAPI构建REST服务（五）——客户端

    WebAPI是标准的Http协议,支持Http协议的客户端(如浏览器)都可以访问.但是,有的时候我们如果想在自己的程序中使用WebAPI时,此时就要实现自己的客户端了.我之前介绍过在.Net 4.5中 ...

  3. 学习linux与wp8.1——启航

    现在不知不觉已经大三了,而本专业的东西没有多大感兴趣的,我看好wp开发和linux开发. 为什么要学习wp开发?其实就是一种兴趣,我手中有部620而已,学着学着就感兴趣了,所以打算继续学下去.同时,我 ...

  4. asp.net后台编写 loading效果

    From :http://www.cnblogs.com/ganmk/articles/1207832.html 使用方法: protected void Page_Load(object sende ...

  5. 在线体验K2 BPM微信审批

    “微信审批”在江湖中传言已久,但很多人依然“只闻其声,未见其人”,这传说中的手感到底有多好?今天,我们就一起来揭开它的真面目吧. 故事发生在上周六傍晚,我接到了加班电话. 晚上21:30终于加完班了, ...

  6. web安全 -- 常见攻击方法及预防措施

    一.sql注入 sql注入,是指攻击者在猜测出服务器上要执行sql后:通过输入数据,拼接原来要执行的sql而形成新的sql:从而到达改变原来查询的意义的目的. -- 原来sql select xxx ...

  7. jQuery 元素遍历

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. exec方法

    如果 exec 方法没有找到匹配,将返回 null.如果找到匹配项,则 exec 方法返回一个数组,并将更新全局 RegExp 对象的属性以反映匹配结果.数组元素 0 包含了完整的匹配项,而元素 1 ...

  9. hadoop生态系统的详细介绍

    1.Hadoop生态系统概况 Hadoop是一个能够对大量数据进行分布式处理的软件框架.具有可靠.高效.可伸缩的特点. Hadoop的核心是HDFS和MapReduce,hadoop2.0还包括YAR ...

  10. oracle触发器如何使用2

    触发器 是特定事件出现的时候,自动执行的代码块.类似于存储过程,但是用户不能直接调用他们.触发器是许多关系数据库系统都提供的一项技术.在ORACLE系统里,触发器类似过程和函数,都有声明,执行和异常处 ...