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

<!DOCTYPE html>
<head>
<meta charset=‘utf-8‘>

<title></title>

    <script src="jquery1.11.1.js"></script>
</head>
<body>
    <form id="form1">

        <input id="file_upload" type="file" />

        <img id="preview" width="60" height="60">

    </form>
</body>
</html>
<script>
    $(function () {
        $("#file_upload").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");

            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr(‘src‘, dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
                // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });

</script>
时间: 2024-10-09 22:41:53

获取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

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获取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.

判断input file 里面的图片是否为空,并把file图片文件显示在另一个地方

var eleFile = document.querySelector('#file_1'); eleFile.addEventListener('change', function() { var file = this.files[0]; // 确认选择的文件是图片 if(file.type.indexOf("image") == 0) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onlo

Hadoop 获取Input File的文件名

写Hadoop程序的时候在Mapper里遇到这个需求,上网查了下,做个记录: public static class MapClass extends MapReduceBase implements Mapper<Object, Text, IntWritable, Text> { @Override public void map(Object k, Text value, OutputCollector<IntWritable, Text> output, Reporter

我也不知道这算不算bug了,单纯记录,没别的意思,图片是上传在慕课网的,所以预览不了。。0.0

无意发现慕课网修改个人签名功能性bug 修改个人签名失败的问题 图片 经过测试,像这样两行文字中间有换行的话,保存会提示error,如图: 图片 而如果不换行,就能成功: 图片 图片 浏览器用的Chrome 0.0 可能是慕课网不允许这样操作吧..除了让我改了两次信息没成功外也没啥影响.已提交反馈. 原文地址:https://www.cnblogs.com/famine/p/9514978.html

在另一个文本框显示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