结合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. 二模 （11） day2

    第一题: 题目大意: 有一本n个单词的字典,其中每个单词的长度不超过4且大于0.现在给你一篇文章,文章中没有分隔符,只有小写字母.现在需要你修改最少的字母,使文章(长度为m 是由字典中的单词构成. n ...

  2. 二模 （1） day1

    第一题: 题目大意:给出N(N<=50)个小于1000的正整数Ai,和一个正整数max,和一个整数cur,从前往后依次对每个Ai,可以让cur+Ai 或者 cur-Ai,但是结果不能大于max, ...

  3. Java对象的序列化和反序列化实践

    2013-12-20 14:58 对象序列化的目标是将对象保存在磁盘中,或者允许在网络中直接传输对象.对象序列化机制允许把内存中的Java对象转换成平台无关的二进制流,从而允许把这种二进制流持久的保存 ...

  4. UINavigationController 子控制器管理原理

    UINavigationController 显示在导航控制器上的控制器 永远是栈顶控制器 后进先出  先进后出原则 /** * 程序获得焦点才能获取触摸事件 * */- (void)applicat ...

  5. Linux Lab

    ssh vi /etc/apt/sources.list su ssh username@ipaddress eg : ssh root@172.16.247.143 实验一 fdisk /dev/s ...

  6. Android类参考---Fragment

    Android类参考---Fragment public final boolean isAdded() 如果该Fragment对象被添加到了它的Activity中,那么它返回true,否则返回fal ...

  7. iOS弹框

    IOS 弹框 如果直接弹出一个自定义的视图 可以选用第三方: MJPopup 弹出: if(!bandview) { bandview=[[[NSBundle mainBundle]loadNibNa ...

  8. FSMC stm32

    1.FSMC机制 FSMC(Flexihie Static Memory Controller,可变静态存储控制器)是STM32系列中内部集成256 KB以上FlaSh,后缀为xC.xD和xE的高存储 ...

  9. unity3d打包和包的使用

    打包: ①Assets下新建文件夹Editor和steamingAssets ②对选定文件打包: using UnityEngine; using UnityEditor; using System. ...

  10. 深入分析：Android中app之间的交互(一，使用Action)

    在我们开发Android App应用的时候,有些需求需要我们启动其他的App来处理一些逻辑,例如我们需要根据一个地址来调用系统或者相关的地图Map App,这样我们不用在自己的App中编写相应的功能, ...