js图片上传 的方法
先规划出框架
<div id="AQA" style="width:300px; height:200px; background-color:aquamarine; text-align:center;margin-left:300px; line-height:200px;" onclick="UpLode()"> // 设置一个ID 为AQA 调节一下框架的大小 在设置一个onclick点击事件
<span><i class="glyphicon glyphicon-open"></i>上传图片</span>
</div>
在添加一个隐藏的Input
<input id="fil" onchange="GetFile()" type="file" style="display:none"/> // 给Input设定一个ID 在添加一个onchang触发的事件 display:none为隐藏 将Input隐藏起来
然后再写JS方法
格式为;
<script type="text/javascript">
function UpLode() {
//触发Fil的 点击事件
$("#fil").trigger("click");
}
//图片上传后onchang触发的事件
function GetFile() {
debugger;
//2 取上传后图片的值
//event.target.files[0] 获取指定上传控件内的第一个文件
var a = event.target.files[0];
//取文件的路径 注意 浏览器的保密协议
var url = window.URL.createObjectURL(a);
//上传图片后让图片显示到上传框
$("#AQA").css('background', 'url(' + url + ')0% 0% / cover')
}
上传图片之前样式为;
上传之后样式为
js图片上传 的方法的更多相关文章
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- ios中摄像头/相册获取图片压缩图片上传服务器方法总结
本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下. 这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...
- js 图片上传
可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...
- 一个node.js图片上传显示小应用
文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...
- node.js图片上传
1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...
- js 图片上传给后台的3种格式
1. file格式 (创建formData来完成file上传) 我们的接口需求: 代码: <input type="file" id="imgfile" ...
随机推荐
- Python33之类和对象(继承)
一.继承的概念及使用方法 在Python中一个类如果想使用前面一个类所有的方法和属性就需要使用继承 继承的定义 def Class_Child(Class_parent) 这样就可以在子类中使 ...
- deepin linux 打开ssh服务
首先,更新一下软件源,打开"终端窗口",输入"sudo apt-get update"-->回车-->" 输入当前登录用户的管理员密码&q ...
- Django模板语言中的Filters的使用方法
Filters可以称为过滤器.下面我们简单介绍是如何使用他的. Filters的语法: {{ value|filter_name:参数 }} Django大概提供了六十个内置过滤器,下面我们简单介绍几 ...
- WUSTOJ 1327: Lucky Numbers(Java)
题目链接:1327: Lucky Numbers Description A lucky number is made by the following rules: Given a positive ...
- JPA 一对一 一对多 多对一 多对多配置
1 JPA概述 1.1 JPA是什么 JPA (Java Persistence API) Java持久化API.是一套Sun公司 Java官方制定的ORM 方案,是规范,是标准 ,sun公司自己并没 ...
- nfs挂载文件
1. 安装必备插件 以防centos7默认没有启动nfs服务 yum -y install nfs-utils rpcbind # 启动 rpcbind 和配置开机自启动 systemctl sta ...
- 转 使用IParameterInspector, IOperationBehavior,Attribute(参数检查器、操作行为接口和标签)扩展WCF操作行为
public class EntryIdInspector : IParameterInspector { public int intParamIndex { get; set; } string ...
- Android Studio 生成 keystore 签名文件
Android Studio 生成 keystore 签名文件 常见 SSL 证书格式 : .DER .CER,文件是二进制格式,只保存证书,不保存私钥. .PEM,一般是文本格式,可保存证书,可保存 ...
- active port
2510099 - SSL Port XXXXX Not Active - message on NWA even though SSL works Resolution Open the defau ...
- fatfs源码阅读
使用fatfs文件的第一步,就是调用F_mount函数注册一个工作空间. F_mount函数的原型如下: 第一个参数根据网上大神的答复,是外设类型,如果是sd卡就是0,flash等等其他的外设就是其他 ...