怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览？

简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览图片

html代码: <input id="file_upload" type="file" /> <div class="image_container"> <img id="preview" style="height:130px;width:117px;border-width:0px;"/> </div> jquery代码: $(function () {…

怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&qu…

获取input file 选中的图片，并在一个div的img里面赋值src实现预览

代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上 [jquery代码] $(function() { $("#file_upload").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#preview");…

js获取input file完整路径的方法

function getPath(){ //判断浏览器 var Sys = {}; var obj = document.getElementById("headImg"); var viewer = document.getElementById("viewImg"); var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.…

js获取input file文件二进制码

<html> <body> <img id="image"src=""/> <br/> <input type="file"onchange="selectImage(this);"/> <br/> <input type="button"onclick="uploadImage();"value="…

layui 图片与表单一起提交 + layer.photos图片层预览

HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> <div class="layui-form-item">  </div>  <div class="layui-upload feedback-padding">…

js获取 input file 图片缩略图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <body> <input type=file…

jquery如何获取input(file)控件上传的图片名称，即"11111.jpg"

html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$('#file').change(function(){ file=$(this).val(); }) var arr = file.split('\\');//注split可以用字符或字符串分割 var fileName = arr[arr.length-1];//这就是要取得的图片名称 alert(file…

js 获取input file路径改变图像地址

html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" class="img-circle" width="100px" height="100px" > <input id="image" type='file' name='myFile' size='15' oncha…

Js/Jquery获取input file的文件名

html代码: <input type="file" name="file" id="file" class="input_text80"></input> js: 方法一:字符串截取 var file = $("#file").val(); var fileName = getFileName(file); function getFileName(o){ …

js获取input file路径改变图像地址

js 获取 input file 文件附给 image src

var a=document.querySelector('input[type=file]'); a.onchange = function (e) { //var reader = new FileReader();//reader.readAsDataURL(a.files[0]);//reader.onload = function (event) {//img.src = event.target.result;//}; var reader = new FileReader(); r…

jquery获取input file的文件名，具有兼容性

var str=$(this).val();var arr=str.split('\\');//注split可以用字符或字符串分割var fileName=arr[arr.length-1];//这就是要取得的图片名称$(this).siblings('.preview').html(fileName);…

js图片前端预览之 filereader 和 window.URL.createObjectURL

//preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getElementById('imgFile').files[0]; var fr = new FileReader(); fr.onload = function(ele){ var pvImg = new Image(); pvImg.src = ele.target.result; pvImg.setA…

input上传图片（file）,预览图片的两种方法。blob与base64编码

上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进img $("#file").change(function () {//input的id var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址 obUrl = objUrl; console.log("objUrl = &q…

input type=file 选择图片并且实现预览效果的实例

为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple&quo…

input type=file 选择图片并且实现预览效果

通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple"/> 当然,直接一个input type=file 只能选择上传的…

jquery即时获取上传文件input file文件名

截图: 代码: <input type="file" id="choosefile" style="display:none"/> <div onclick="uploadfile()" style="width:78px;height:50px;margin-left:5px;background:#00A2D4;float:left;display:block;line-height:50p…

自定义type为file型input控件+该控件具有本地图片预览功能

最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下面的代码.思路说明持续补充中... html <div class="item" id="select-storeKeeper"> <span class="label"><b class="ftx04&quo…

js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 var file = $('#file'), aim = $('#em'); file.on('change', function( e ){ //e.currentTarget.files 是一个数组,如果支持多个文件,则需要遍历 var name = e.currentTarget.files[…

在另一个文本框显示input file选择的文件名字

javascript 获取文件域 (type=file) 的完整路径一直是很麻烦的问题,问题主要出在一些浏览器基于安全性考虑而不能正常获取到文件域中选中图片的决对路径,尤其一些基于webkit的浏览器比如 Chrome, Safire等浏览器,下面是一个可以兼容 IE 6 , 7, 8 和 firefox 的获取 input file 完整路径的方法,该方法不支持 Chrome 和 Safire,要支持这些浏览器可能要使用到 Flash ,对程序员来说比较麻烦. HTML页面: <…

h5图片上传预览

项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html <div> <div class="figure-box" id="figure_box"></div> <input type="file" id="imgUploadBtn" /> &l…

使用readAsDataURL方法预览图片

使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性. 这种方法的缺点是:必须要先把图片上传到服务器.那么问题来了,如果上传的图片很大,而网速又很慢,这就需要等待很久预览图片才会显示出来了,而且,如果用户预览图片后发现不太满意,想重新选择一张图片,这时候还要把已经上传到服务器上的图片给删除掉. 自从有了HTML5的FileReader…

web 图片上传实现本地预览

在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传按钮添加事件.隐藏真正input框.用事件来触发: function imgBtn(){ return document.getElementById("inputid").click(); } 现在浏览器基本都支持H5 .针对H5的代码: var docObj=document.getE…

移动端 H5 拍照从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较难: 1手机获取相册的图片文件,拍照的图片文件,通过js 的自带的img对象,获取图片对象. 2.图片的压缩,采用canvas 画布进行压缩图片,图片的质量通过参数指定大小,数值区间在0.1-0.9之间,数值越小压缩的比例越小 3.图片的预览,将canvas画布生成的图片经过旋转平移到预览区域 4.…

JS图片上传预览插件制作（兼容到IE6）

其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会…

使用FileReader实现前端图片预览

在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性. 这种方法的缺点是:必须要先把图片上传到服务器.那么问题来了,如果上传的图片很大,而网速又很慢,这就需要等待很久预览图片才会显示出来了,而且,如果用户预览图片后发现不太满意,想重新选择一张图片,这时候还要把已经上传到服务器上的图片给删除掉. 自从有了HTML5的FileReader对象以后,预览图片变得简单多了,不再需要后台的配合,并且JS操作本地文件已经成…