结合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. NSDate的运算

    NSDate存储的是世界标准时(UTC),输出时需要根据时区转换为本地时间 Dates NSDate类提供了创建date,比较date以及计算两个date之间间隔的功能.Date对象是不可改变的. 如 ...

  2. POJ 3006 Dirichlet's Theorem on Arithmetic Progressions 素数 难度:0

    http://poj.org/problem?id=3006 #include <cstdio> using namespace std; bool pm[1000002]; bool u ...

  3. sdut 2609 A-Number and B-Number

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2609 数位DP 以前没怎么做过,自己憋了半天, ...

  4. Ibatis.Net 各种配置说明(二)

    一.各个配置文件的作用说明 providers.config:指定数据库提供者,.Net版本等信息. xxxxx.xml:映射规则. SqlMap.config:大部分配置一般都在这里,如数据库连接等 ...

  5. mysql数据库 安装 （原创）

    1.首先下载mysql 数据库,我安装的是mysql5.1版本,直接安装就行,但是如果以后你想在数据库里显示中文的话,要把字符集设置为gb2312 2.配置数据源odbc.  mysql-connec ...

  6. HDU 2586 LCA

    题目大意: 多点形成一棵树,树上边有权值,给出一堆询问,求出每个询问中两个点的距离 这里求两个点的距离可以直接理解为求出两个点到根节点的权值之和,再减去2倍的最近公共祖先到根节点的距离 这是自己第一道 ...

  7. NOP初学记录

    1.  介绍的话不多说了.直接先来简单的安装跟配置先以3.6版本为例: 附带官网地址: http://www.nopcommerce.com   自行下载. 中文网:http://www.nopchi ...

  8. （转）如何学好C语言，一个成功人士的心得！

    zidier111发表于 2013-1-26 08:59:05 　　今 天，我能够自称是一个混IT的人，并能以此谋生，将来大家能一次谋生，都要感谢两个人：克劳德.香农和约翰.冯.诺依曼，是他们发现了所 ...

  9. SDK（SoftWare Development Kit）介绍

    ctrl+alt+shift+s进入项目设置页面: SKDs的界面可以设置SDK. 点击到project 可以为project选择sdk 如上图标注 1 所示,IntelliJ IDEA 支持 6 种 ...

  10. Gmail新版截图曝光 你还能认得出来吗？

    Gmail即将迎来巨大的改变.据外媒消息,目前Google正在测试新的网页版Gmail.要知道从Gmail推出以来还从未进行过如此大的改动. 新版Gmail中,界面相比之前,采用了更加扁平话的设计,整 ...