结合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. STM32-AFIO

    只有使用了AFIO的事件控制寄存器.AFIO的重映射功能以及外部中断(EXTI)控制寄存器才需要开启AFIO的时钟,STM32参考手册从来没说过使用IO的复用功能就一定要开启AFIO时钟,这是个误区.

  2. 长理ACM 13-围圈报数(谌海军)

    题目标题:围圈报数(谌海军) 题目描述:有n(n<=100)围成一圈,顺序排号(从1排到n).从第一个人开始报数(从1报到m(m<=9)),凡报到m的人退出圈子,问最后留下的是原来第几号的 ...

  3. C#如何以管理员身份运行程序

    在使用winform程序获取调用cmd命令提示符时,如果是win7以上的操作系统,会需要必须以管理员身份运行才会执行成功,否则无效果或提示错误. 比如在通过winform程序执行cmd命令时,某些情况 ...

  4. C- printf的使用

    ASC C之后引入的一个特性是,相邻的字符可以被自动连接 /* printf.cc * 2014/09/02 update */ #include <iostream> using nam ...

  5. SPOJ SUBLEX 求第k小子串

    题目大意: 对于一个给定字符串,找到其所有不同的子串中排第k小的子串 先构建后缀自动机,然后我们可以将整个后缀自动机看做是一个DAG图,那么我们先进行拓扑排序得到 *b[N] 对于每个节点记录一个sc ...

  6. Rhel6-heartbeat+lvs配置文档

    系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...

  7. Portlet和servlet的区别

    相同之处 l 都是java技术开发的web组件 l 都是由特定的容器在管理 l 都可以动态产生各种内容 l 生命周期都是由容器管理 l 和客户端的交互通过request/response机制 不同之处 ...

  8. 解决python version 2.7 required,which was not find in the registry

    程序自动写注册表 http://www.vvivv.com/post-143.html 手工写 http://blog.csdn.net/baikaishui525/article/details/9 ...

  9. 看项目得到info_freeCsdn-01闪屏页面

    /** * 渐变展示启动屏 */ private void startAnimation() { Animation aa = new Animation() { }; aa.setDuration( ...

  10. Struts2 validate校验

    一般的,用户注册的时候,我们需要校验一些用户提交过来的参数. 一般有两道屏障,一是在前台页面上使用js进行验证,直接杜绝了不正常信息的提交.二是将提交过来的信息进行验证,不通过则返回注册页面并显示错误 ...