Input File选择图片后,未保存预览
今天实现上传图片到服务器
简单的jQuery实现input file选择图片后,可以预览图片的效果
简单的HTML代码:
<div>
<img src="" class="img">
</div> <input type="file" class="imgInput">
注:img就是用来显示预览图片的
然后就是jQuery代码,很简单
$(".imgInput").change(function(){
$(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
});
然后就实现了选择图片后可以预览图片的效果了
其中需要注意的是使用的是DOM元素,jQuery元素和DOM元素之间的转换
Input File选择图片后,未保存预览的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- type="file" 选择图片后预览
function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...
- H5 选择图片上传及预览
<div class="sctp"> <img src="img/sczp.png" id="photo" alt=&qu ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
随机推荐
- Use Uncertainty As a Driver
 Use Uncertainty As a Driver Kevlin Henney ConFRonTEd WiTH TWo opTionS, most people think that the ...
- string类自定义字符串替换函数replace
#include <iostream> #include <string> using namespace std; /* * 函数功能:将string字符串中的某些字符替换 ...
- 在不足256M内存的机器上启动RHAS 3时总要停顿10秒的问题
在VM里安装rhas3.0,由于只分配了256M RAM,系统起动总是提示不足256M.我查了一下[root@rhas3 mrtg]# grep -ri "Normal startup wi ...
- Android控件-TabHost(二)
这边再补充一种更为灵活的方法,可以把TabWidget隐藏,用(RadioGroup+RadioButton)来代替,并利用监听器的方式来实现监听点击点击跳转Activity. 在讲解之前,先补充几点 ...
- SQL server 事务介绍,创建与使用
事务(Transaction)事务是一种机制,一个操作序列,包含一组操作指令,并且把所有的命令作为一个整体一起向系统提交或撤销操作请求(即要么全部执行,要么全部不执行)---------------- ...
- vue抽取公共方法———方法一
方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]- ...
- obdg反汇编破解crackme
obdg是一个反汇编软件 直接将要反汇编的exe文件拖入或者file->open打开文件,等待一段时间就会显示出来 界面中分别为汇编代码(程序内存内容),寄存器内容,数据内存内容,栈内容 代码界 ...
- Redis 数据持久化的方案的实现
原文:Redis 数据持久化的方案的实现 版权声明:m_nanle_xiaobudiu https://blog.csdn.net/m_nanle_xiaobudiu/article/details/ ...
- Android图像处理之熔铸特效
代码: package com.color; import android.content.Context; import android.graphics.Bitmap; import androi ...
- android图像处理(3) 浮雕效果
这篇将讲到图片特效处理的浮雕效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:用前一个像素点的RGB值分别减去当前像素点的RGB值并加上127作为当前像素点的RGB值. 例: ABC 求B ...