<!doctype html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
</head>
<body>

{include file="public/header"}
<div class="content">
<div class="main-wrap">

<form action="{:url('Index/insert')}" class="parsley-validate" enctype="multipart/form-data" method="post">
<div class="form-group-col-2">
<div class="form-label">封面图</div>
<div class="form-cont">
<input type="file" name="img1[]" placeholder="封面图" class="form-control form-boxed" required="" id="up-goods-btn"/>
<img id="img0" style="width: 150px">
</div>
</div>

<div class="form-group-col-2">
<div class="form-label"></div>
<div class="form-cont">
<input type="submit" class="btn btn-primary aaa" value="保存"/>
</div>
</div>

</div>
</div>

<!--form validation js -->
<script src="__STATIC__/js/common/jquery.js"></script>
<script src="__STATIC__/js/parsley.js"></script>
<script src="__STATIC__/js/zh_cn.js"></script>
<script src="__STATIC__/layui/layui.js"></script>

<!--头像预览及上传-->
<script>
$("#up-goods-btn").change(function(){
// getObjectURL是自定义的函数，见下面
// this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
// ，但是这里只读取第一个
var objUrl = getObjectURL(this.files[0]) ;
// 这句代码没什么作用，删掉也可以
// console.log("objUrl = "+objUrl) ;
if (objUrl) {
// 在这里修改图片的地址属性
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}

</script>

</body>
</html>

id要保持唯一性！！！

PHP直接查看换取的图片的更多相关文章

  1. Window Server 2012 R2 没有照片查看器 打开图片都是画板问题怎么解决

    新安装了 Window Server 2012 R2 系统,感觉屌屌的样子,加上开机速度蛮快,心里略爽.结果,打开图片一看,发现竟然是画板,而且还没有照片查看器,顿时泪流满面. 后来我利用了强大的百度 ...

  2. js手写图片查看器（图片的缩放、旋转、拖拽）

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  3. js实现图片查看器（图片的缩放、旋转、拖拽）

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

  4. Android中级第十讲--相机录像和查看系统相册图片

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 录像比较简单,开始录制: myCamera.unlock(); ...

  5. Win10 默认用Windows照片查看程序打开图片

    ::复制以下内容到记事本: @echo off&cd\&color 0a&cls echo 恢复Win10照片查看器 reg add "HKLM\SOFTWARE\M ...

  6. windows下查看webp格式图片

    关于webp 时下webp格式日渐势起,主流浏览器(IE: ???)已经开始支持webp,诸多互联网企业(Facebook 和 ebay,国内的有淘宝.腾讯和美团等)都已经在不遗余力的将webp应用到 ...

  7. Win10用Windows照片查看程序(照片查看器)打开图片

    以上方法只能一个个添加,也有人说不好使,这里给出一个我写的批处理程序,反正我一直用着很好.   ::复制以下内容到记事本: @echo off&cd\&color 0a&cls ...

  8. 【转】C#调用Windows图片和传真查看器打开图片

    //建立新的系统进程 System.Diagnostics.Process process = new System.Diagnostics.Process(); //设置文件名,此处为图片的真实路径 ...

  9. 查看base64编码图片

    1.确认编码纯净(没有编码参数) 2.在头部加上 data:image/jpeg;base64, 3.放到浏览器查看

随机推荐

  1. ELK+Beats日志分析系统部署

    一.            名词介绍: E:ElasticSearch 搜索,简称es L:Logstash 管理日志和事件的工具 K:Kibana 功能强大的数据显示客户端 Beats 轻量级数据传 ...

  2. leetcode240

    public class Solution { public bool SearchMatrix(int[,] matrix, int target) { , j = matrix.GetLength ...

  3. 使用AsyncTask类实现简单的异步处理操作

    AsyncTask: 1.这是一种相比Handler更轻量级的处理异步任务的工具类 2.它和Handler类一样,都是为了不影响主线程(UI)而使用的((注:UI的更新只能在主线程中完成) 3.这个工 ...

  4. 规模预算 之 FP法（作成中）

    五大要素 「外部入力」「外部出力」「内部論理ファイル」 「外部インタフェースファイル」「外部照会」 优点 1) 開発初期段階での概算が可能 2) エンドユーザが認識可能な計測法である(ユーザ目線での機 ...

  5. 剑指offer例题——链表中倒数第K个结点

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 编程过程 此处采用两个指针依次后移的方法来求解,首先,用一个指针移到第k个位置,之后将第二个指针放在第一位,与第二个指针一同移动,当第二个指针移动 ...

  6. 38.Spring-spring和hibernate整合.md

    目录 1.定义各种类对象 2.创建Hibernate配置文件 3.配置applicationContext.xml 4.注意事项 1.定义各种类对象 package per.liyue.sh.demo ...

  7. week06 12 我们准备数据 前端调用rpc 前后端联调一下

    用postman发送请求 出现一个问题 我在return结果前 要将数据转换成字典 所以我们用json.dumps()后再json.load()回来 这样就避免了这个问题 因为数据结构的数据 比如li ...

  8. ADC采样间隔问题+TRGO作为ADC的触发源头

    为了控制采样时间,可以使用一个定时器的TRGO(定时器里每次发生更新事件时会有这个信号产生)作为定时器的外部触发. 从定时器框图可以看出,TRGO为TIMx的一个输出.不过这个输出是内部使用的. vo ...

  9. Tomcat-servlet基础

    1.1 概念 运行在服务器上的小程序   定义了浏览器访问到(tomact)的规则 1.2 步骤 1.3 执行原理 1  当服务器 接收到客户端浏览器的请求后  会解析url地址  获得url路径   ...

  10. EOS keosd

    [EOS keosd] The program keosd, located in the eos/build/programs/keosd folder within the EOSIO/eos r ...