结合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. discuz判断用户登录

        在include/common.inc.php 文件.程序开始先判断是否有cookie存到了sid值,然后解密cookie['auth']这个用户登录状态加密字符串,如果解密出来有uid值表示 ...

  2. javascript photo http://www.cnblogs.com/5ishare/tag/javascript/

  3. K2任命新的亚太区高级副总裁

    K2, 一个屡获殊荣的企业应用软件公司宣布,任命陈光明(Tan Kwang Meng, KM)为亚太区高级副总裁.这次任命是对公司持续发展的肯定,同时也是对将亚太区作为全球扩张战略的关键市场的承诺. ...

  4. java udp网络编程

    import java.net.*; /* 通过UDP传输发送文字数据 1.建立socket服务 2.提供数据,并封装到数据包中 3.通过sokect服务的发送功能,将数据包发送出去 4.关闭资源 * ...

  5. JNI与NDK简介

    最近稍微了解一下JNI和NDK. 网上各种教程给人一种二者不分的感觉, 经过自己运行代码, 将两者的关系理了一下. 就目前了解,JNI应该是java自带的一种调用c和c++等语言(native cod ...

  6. sql 给数据库表 字段 添加注释

    最近发现一些代码生成器 有针对注释做一个很好的转化,之前建表的时候 没有这块的注释.现在想增加,专门去看了下 如何增加注释 1 -- 表加注释 2 EXEC sys.sp_addextendedpro ...

  7. [Java]Java简介

    Java版本历史 1995年5月23日,Java语言诞生 1996年1月,第一个JDK1.0诞生 1996年4月,10个最主要的操作系统供应商申明将在其产品中嵌入JAVA技术 1996年9月,约8.3 ...

  8. 网络安全之PHP安全编程建议

    要提供互联网服务,当你在开发代码的时候必须时刻保持安全意识.可能大部分 PHP 脚本都对安全问题都不在意,这很大程度上是因为有大量的 无经验程序员 在使用这门语言.但是,没有理由让你因为对你的代码的不 ...

  9. 从github上面拷贝源码

    http://www.cnblogs.com/xing901022/p/4287064.html

  10. HTML--4格式布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...