文档章节

上传图片直接预览

maxdeath
 maxdeath
发布于 2016/11/29 17:41
字数 87
阅读 10
收藏 0
点赞 0
评论 0

html代码

<div id="rrr"></div>
<input type="file" id="hiddenfile" name="image" onchange="getimgload()"/>

js代码

function getimgload(){
    var file=document.getElementById("hiddenfile").files[0];
    var reader=new FileReader();
    reader.onload = function ( event ) {
      var htmlStr = null;
      var src = null;
      if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片!");
        return false;
      }
        src = event.target.result;
        htmlStr = "<img style='width:50px;height:50px' src='"+src+"'>";
      $("#rrr").html("");
      $("#rrr").append(htmlStr);
    };
    reader.readAsDataURL(file);
  }

复制直接使用

© 著作权归作者所有

共有 人打赏支持
maxdeath
粉丝 1
博文 23
码字总数 8253
作品 0
无锡
程序员
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5K
0
WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

大家好,我的使用场景如下:(我觉得比较通用) 用户在需要专家帮忙的时候需要填写文字信息以及上传图片 可上传多图,每选择一个图片无需点击“上传”按钮而自动上传 上传成功后,出现缩略图...

错觉
2015/12/09
7.6K
6
Jcrop 整合 FileAPI 图像裁剪上传

Jcrop是一款优秀的jQuery插件,可以非常方便地实现图像裁剪,而且功能十分的强大。 一般的情况下,图像裁剪的实现要经过两次图像上传,第一次将图片上传到后台,后台返回一个链接,通过这个链...

Acce1erator
2015/12/28
234
0
KodExplorer 4.22 发布,拖拽增强,安全性优化

KodExplorer 4.22 发布了。KodExplorer可 道云,原名芒果云,是基于 Web 技术的私有云和在线文件管理系统,它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、...

雾渺
2017/10/02
1K
5
pumelo/WebHeadPicker

#WebHeadPicker #Web头像拾取器插件 在网上找了一段时间,总的来说,cropper比较好。本项目基于cropper,以及一些互联网资源。 您是否应该使用本项目?如果您需要把头像直接上传到阿里云OSS...

pumelo
2017/05/20
0
0
2017.11.15-学习笔记:简单实现图片预览及拖拽图片预览

前言:图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了,为了减轻后台服务器的工作量,这里使用HTML5的来实现图片预览。 FileReader 1.构造方式: 2.属性(这...

演员小新
2017/11/15
0
0
使用Web Uploader实现多文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <......

DavidBao
2015/04/15
0
7
08-05更新ThinkPHP+swfupload多图上传实例 经典实用的php多图上传

先上一张图片给大家看看效果,有需要就下载学习。不一定非要在ThinkPHP里,只是我非常喜欢去用ThinkPHP做开发了。 好了。现在咱们需要的东西是,下载一个swfupload.js网上很多,自己百度吧....

3147972
2014/03/21
0
0
NodeBB Upyun Uploads 插件开源,保存图片至又拍云

NodeBB 上传插件 NodeBB Upyun Uploads 发布,主要作用是将图片上传至又拍云,无论是发布主题时插入的图片,还是在 Profile 上上传的背景图片,都会上传至又拍云。 插件的介绍和安装使用方式...

又拍云
2016/12/12
1K
2
weui上传文件完整例子,后台Java接受,SSM框架,要解决的问题是接受2张以上图片

weUI的Uploader组件,目前已实现的功能是,一个input type=file,上传图片,有压缩预览,最多6张,每读取一张,js就添加了节点预览一张,但是表单直接提交时,后台获得的是文件标签最后一次操...

辉煌霸猪
2017/11/30
87
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JAVA 三种WebService 规范

JAVA 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC)、JAXM&SAAJ、JAX-RS。 1. Jaxws(掌握) JAX-WS 的全称为 Java API for XML-Based Webservices ,早期的基于SOAP 的JAVA 的Web 服务...

onedotdot
9分钟前
0
0
将博客搬至CSDN

将博客搬至CSDN

xpbob
9分钟前
0
0
TensorFlow 拟合异或 one-hot方式

增加隐含层数目 之前是按照计算出的数值按照0.5分为0和1,现在是算出向量,用维度较大的作为结果 import tensorflow as tfimport numpy as np# 网络结构:2维输入 --> 2维隐藏层 --> ...

阿豪boy
12分钟前
0
0
Aidl进程间通信详细介绍

目录介绍 1.问题答疑 2.Aidl相关属性介绍 2.1 AIDL所支持的数据类型 2.2 服务端和客户端 2.3 AIDL的基本概念 3.实际开发中案例操作 3.1 aidl通信业务需求 3.2 操作步骤伪代码 3.3 服务端操作...

潇湘剑雨
27分钟前
0
0
python爬虫日志(3)下载图片

import urlliburl='https://xxx.jpg'#图片地址res=urllib.request.urlopen(url)#此函数用于对url的访问data=res.read() #字节流with open(r'D:\1.jpg',"wb") as code: c...

茫羽行
44分钟前
0
0
vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运...

JamesView
53分钟前
0
0
bash审计系统搭建

step1:使用saltstack工具bash部署>>>>>> # salt -N clienta state.sls audit step2:安装elasticsearch>>>>>> 注意: 1.不能以root用户进行启动,需要创建用户,并对解压的elasticsearch目录赋......

硅谷课堂
54分钟前
0
0
Linux sar性能分析

Linux使用sar进行性能分析 sar简介 sar命令常用格式 sar常用性能数据分析 整体CPU使用统计-u 各个CPU使用统计-P 内存使用情况统计-r 整体IO情况-b 各个IO设备情况-d 网络统计-n sar日志保存-...

易野
55分钟前
0
0
用 Python 实现打飞机,让子弹飞吧!

所用技术和软件 python 2.7 pygame 1.9.3 pyCharm 准备工作 安装好 pygame 在第一次使用 pygame 的时候,pyCharm 会自动 install pygame。 下载好使用的素材。 技术实现 初始化 pygame 首先要...

猫咪编程
今天
0
0
MySQL的行锁和表锁

简单总结一下行锁和表锁。 行锁 每次操作锁住一行数据。开销大,加锁慢;会出现死锁;锁定粒度最小,发生锁冲突的概率最低,并发度也最高。 表锁 每次操作锁住整张表。开销小,加锁快;不会出...

to_ln
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部