上转图片并预览

最新推荐文章于 2022-11-12 15:46:53 发布
最新推荐文章于 2022-11-12 15:46:53 发布
阅读量172 收藏
点赞数
分类专栏： 开发笔记-杂
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33144861/article/details/78269809
版权 
<!-- zhouxiang www.zhou-xiang.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>上传图片并预览</title>
    <script src="uploadPreview.min.js" type="text/javascript"></script>
    <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
    <script>
        window.onload = function () { 
            new uploadPreview({ UpBtn: "up_img1", DivShow: "imgdiv1", ImgShow: "imgShow1" });
            new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" });
            new uploadPreview({ UpBtn: "up_img3", DivShow: "imgdiv3", ImgShow: "imgShow3" });
            $("#imgdiv2").hide();
            $("#imgdiv3").hide();
            $("#urldiv1").hide();
            $("#urldiv2").hide();
            $("#urldiv3").hide();
        }
    </script>
    <script type="text/javascript">


        function upDivCheck_Js(){
            if($("#up_img1").val() != ""){
                $("#imgdiv2").show();
                $("#urldiv1").show();
            }
            if($("#up_img2").val() != ""){
                $("#imgdiv3").show();
                $("#urldiv2").show();
            }
            if($("#up_img3").val() != ""){
                $("#urldiv3").show();
            }
        }

        function deleteBtn_Js(imgNo){
            $('#imgShow'+imgNo).attr("src","");
            $('#up_img'+imgNo).val("");
        }



        $(function(){
           $('#up_img1').on('change',function(){
                upDivCheck_Js();
           });
           $('#up_img2').on('change',function(){
                upDivCheck_Js();
           });
           $('#up_img3').on('change',function(){
                upDivCheck_Js();
           });
           $(".imgdiv").mouseenter(function () {
                $(this).find(".delete").show();
           });
           $(".imgdiv").mouseleave(function () {
                $(this).find(".delete").hide();
           });
        })
    </script>
</head>
<style>

.imgdiv{
height: 100px;
background: url(upBtn.png);
width: 100px;
position:relative;
}
.imgdiv .delete{
position: absolute;
top: 0px;
right: 0px;
width: 10px;
height: 10px;
display: none;
}
.inputstyle{
    width: 100px;
    height: 100px;
    cursor: pointer;
    font-size: 30px;
    outline: medium none;
    position: absolute;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity:0; 
    left:0px;
    top: 0px;
}
</style>
<body>

        <div id="imgdiv1" class="imgdiv">
            <img id="imgShow1" width="100" height="100" />
            <input type="file" id="up_img1" class="inputstyle"/>
            <a href="#" onclick="deleteBtn_Js(1)">
                <img src="deleteBtn.png" class="delete" />
            </a>
        </div>
        <div id="urldiv1">
            <label>链接： </label><input id="url1" name="url1" maxlength ="100"/>
        </div>  
    <br/>
        <div id="imgdiv2" class="imgdiv">
            <img id="imgShow2" width="100" height="100" />
            <input type="file" id="up_img2"class="inputstyle"/>
            <a href="#" onclick="deleteBtn_Js(2)">
                <img src="deleteBtn.png" class="delete" />
            </a>
        </div>
        <div id="urldiv2">
            <label>链接： </label><input id="url2" name="url2" maxlength ="100"/>
        </div>  
    <br/>
        <div id="imgdiv3" class="imgdiv">
            <img id="imgShow3" width="100" height="100" />
            <input type="file" id="up_img3"class="inputstyle"/>
            <a href="#" onclick="deleteBtn_Js(3)">
                <img src="deleteBtn.png" class="delete" />
            </a>
        </div>
        <div id="urldiv3">
            <label>链接： </label><input id="url3" name="url3" maxlength ="100"/>
        </div>
    <br/>
    Hello World
</body>
</html>

这里用到了网上的一个JS文件(上传图片并显示)，我进行了一些改写，增加了图片像素尺寸的判断控制

/*
*插件作者:周祥
*插件介绍:图片上传本地预览插件
*插件网站:http://jquery.decadework.com
*作  者QQ:200592114
*/
var uploadPreview = function(setting) {
    var _self = this;
    _self.IsNull = function(value) {
        if (typeof(value) == "function") {
            return false;
        }
        if (value == undefined || value == null || value == "" || value.length == 0) {
            return true
        };
        return false;
    };
    _self.DefautlSetting = {
        UpBtn: "",
        DivShow: "",
        ImgShow: "",
        Width: 100,
        Height: 100,
        ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
        ErrMsg: "文件格式错误",
        callback: function() {}
    };
    _self.Setting = {
        UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn: setting.UpBtn,
        DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow: setting.DivShow,
        ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow: setting.ImgShow,
        Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width: setting.Width,
        Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height: setting.Height,
        ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType: setting.ImgType,
        ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg: setting.ErrMsg,
        callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback: setting.callback
    };
    _self.getObjectURL = function(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        };
        return url;
    };
    _self.Bind = function() {
        document.getElementById(_self.Setting.UpBtn).onchange = function() {
            if (this.value) {

                if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert(_self.Setting.ErrMsg);
                    this.value = "";
                    return false
                };

                    var _URL = window.URL || window.webkitURL;
                    var sizeimg = new Image();
                    var ImgShowSrc = _URL.createObjectURL(this.files[0]);
                    sizeimg.src = ImgShowSrc;
                    sizeimg.onload = function(){
                        if(sizeimg.width != 750 && sizeimg.height != 340){
                            sizeFlag = false;
                            alert("图片大小不符合要求");
                            document.getElementById(_self.Setting.UpBtn).value = "";
                            return false
                        }else{
                            document.getElementById(_self.Setting.ImgShow).src = ImgShowSrc;
                        };
                        _self.Setting.callback();
                    }


            }
        }
    };
    _self.Bind();

}

这里写图片描述

93年的香槟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php上传图片并预览
qq_37805832的博客
09-27 2546
php上传文件并预览功能.我使用的是phpstudy.请现在D:\phpstudy_pro\WWW下面新建一个uploads文件夹(文件上传后就存储在uploads哪里哈)
php上传图片并预览源码
04-14
这个"php上传图片并预览源码"示例提供了HTML和PHP两种语言的代码，帮助开发者理解如何实现这一功能。下面我们将深入探讨其中涉及的关键知识点。 1. **表单（HTML）**： HTML页面通常使用`<form>`元素来创建一个...
图片上传本地预览插件v1.3
jtczhouxiang的专栏
12-12 424
更新内容:1.修复多层级框架获取路径BUG. 2.去除对jquery插件的依赖.
周祥文件管理插件 1.4
05-01
周祥文件管理插件 1.4 更新内容: 1.修复了 删除 添加文件夹后 部分用户报错问题. 2.修复了 下载文件时 中文解码问题. 3.更新了插件功能,增加了文件重命名功能 点击文件 然后点击修改按钮 即可重命名. （注:重命名 可以更改扩展名 例如:login.txt更改时在文本框中输入 login.png 即可把扩展名改掉 如果不想更改扩展名 就输入 log.txt 即可） 4.更新了config.xml功能 添加了重命名功能关闭显示功能. 5.修复了session过时后 顶层无法操作的问题. 6.增加了多用户操作元素 可以让不同用户 进行不同的权限操作(具体实现方法 见File.xml文件). 7.修复了切换文件夹时 下载报错问题. 8.修复了剪切文件夹时 部分用户粘贴报错问题. 功能介绍: 文件剪切,复制,粘贴,删除皆可进行多个操作 可以新建文件夹 可以指定网站默认显示的文件夹 可以删除文件夹及文件夹下所有文件 支持IE6,7,8等N个浏览器 支持多文件无刷新上传 支持单文件下载 文件流输出 文件属性 可以在文件上停留几秒 就会看到 可以自定义添加文件图片 可以以文件夹方式多个操作管理 不必一个一个的操作 支持上一步  可以让你回到过去 个性化的windows操作界面 让您与众不同 可以自定义文件之间的间距 可以设置文件每行显示个数 （index.aspx用记事本打开,不懂.NET的勿改） 可以动态设置访问验证 让没有登录的用户 无法操作 并跳转到登录页面 支持功能限制,对不方便开放的功能 可以禁止掉 支持上传插件 全局调用 功能解析: Files/images/gif 这个文件夹可以上传 你需要显示的文件图片 例如:你的文件扩展名为 .html 那么 你就可以上传一个 html.gif 的图片放到这个文件夹里  图片只能为gif格式 Files/File.xml 该XML文件 可以更改你需要显示根目录的文件夹 默认显示:music  myfile  photos 操作说明: 操作权限:默认目录 不可操作 上传:点击上传支持多个文件上传 下载:单击一个文件后 点击下载即可该下载 可以不必去管单击的颜色 只要单击文件后 马上点击下载即可 文件夹及文件操作:点击文件夹按钮 切换到文件夹 然后选中 您就可以剪切 或者 复制 之后 切换回来  再找到你需要粘贴的文件夹 就可以了 图片问题:文件没有图片的  大家可以自行添加 如何添加 见上 删除:可以进行多个文件同时删除 切换到文件夹 也可以删除多个文件夹 File.xml文件里可以启用 访问验证功能 注:凡是文件名带蓝色的 皆为选中  状态 请谨慎操作  除了下载 其余都是多文件操作  谨慎操作啊 别把网站给删了 访问地址:http://您的地址/admin/Files/index.aspx BUG反馈: 请联系QQ：200592114 请保存好 错误信息 和错误页面文件 及错误URL地址  意见反馈: [email protected]
jquery 图片上传本地预览V1.2
weixin_33842328的博客
06-07 68
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari代码进行小小的压缩 如果看源码 自己解压就行了版本已升级  修复jquery版本问题  支持任意jquery版本代码在线演示地址：http://jquery.decadework.com/插件下载地址：http://jquery.decadework.com/plugin/uploadPreview....
Vue上传图片并预览
as_64的博客
04-12 4946
1.input用来接收图片，img用来显示图片，让input变成透明并置于img上 <input class="input_image left" type="file" @change="uploadImage($event)" accept="image/*" /> <img class="show_input_image left" :src="imgSrc" /> css代码 .show_input_image { position: absol
vue上传图片并预览
weixin_39150852的博客
03-29 1万+
html代码： <div id="headImg"> <div id="myPhoto"> <div class="viewPhoto" @click="monidianji"> <i cl...
input上传图片并预览
热门推荐
PresByter的博客
10-23 9万+
首先说一下input 大家都知道上传文件，图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file">；在页面的样式是不可以更改的，如下图 但是最为一个投机取巧的前端，一切样式都是可以修改的。 效果图如下 代码： <input type="file" n
Vue上传图片并预览(好)
leveretz的博客
11-12 1170
Vue上传图片并预览(好)
layui上传图片并预览
qq_44298741的博客
03-18 1318
看了别的博主写的，找不到啦，等找到了再加链接。 先记录下来使用。 js layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test1' ,url: '<%=basePath%&g
vue实现上传图片并预览效果 html+css+js
你好呀，很高兴你在看这里~
06-27 4100
大家好，(๑╹◡╹)ﾉ” 这是我在逛b站时看到一个上传图片的效果，想着可以自己也做一个，因为原作者是用原生js写的，那我不如就用vue写好了，当然，是一个很小的东西，在HTML文件直接引用vue就好了，详细步骤如下~
python 实现上传图片并预览的3种方法(推荐)
09-21
总结起来，Python实现上传图片并预览的功能，主要有以下关键点： - 前端使用HTML的`<input type="file">`让用户选择图片，通过JavaScript监听文件变化事件，实现图片预览。 - 使用jQuery或其他库（如Vue.js、React....
React+ajax+java实现上传图片并预览功能
08-30
在上面的代码中，我们创建了一个上传图片的组件，该组件包含一个文件输入框和一个图片预览区域。当用户选择本地图片时，我们使用ajax发送POST请求到服务器，并将上传的图片信息存储在状态机制中。 ajax中实现上传...
jquery上传图片并预览
08-09
"jquery上传图片并预览"是一个常见的功能需求，尤其在社交媒体、个人资料编辑或者在线表单等场景中，用户可能需要上传图片并在提交之前进行预览。这个功能能够提供更好的用户体验，因为用户可以在上传前看到图片的...
Ajax 上传图片并预览的简单实现
10-21
下面小编就为大家带来一篇Ajax 上传图片并预览的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
SpringMVC上传图片并预览
酒肉猿
08-01 3261
1.HTML代码<form id="logoform" enctype="multipart/form-data"> <img src="../media/images/upload.png" style="width:150px;height:150px;" id="showimg"/> <input type="file" name="file" id="image_input"/> </f
JAVA参数验证 Validation(二)分组校验&自定义校验
当作编码记录
09-08 1万+
有些时候一个参数会在多个场景使用，不同场景对该参数的校验需求不同，即有些场景不对该参数进行校验。 比如注册时，我们要填写出生日期参数，但是登录时并不需要该参数 这里可以用到校验分组groups public class User implements Serializable { // 添加2个空接口，用例标记参数校验规则 /** * 注册校验规则 */
XXL-JOB源码分析
当作编码记录
10-10 2371
本文档以2.2.0版本为基准 一、表结构 xxl_job_group 执行器表 保存执行器列表，客户端地址列表 xxl_job_info 任务调度表 保存任务列表，下次调度时间 xxl_job_lock 并发锁表 Admin集群场景 ...
JAVA参数验证 Validation(一)
当作编码记录
09-08 2115
作者邮箱：1911150175@qq.com现状：部分人验证参数时，是在每个方法内对每一个参数进行一一验证；但是如果这些参数在多个接口共同会使用到，就会增加一部分重复代码劳作，如果能将这些参数验证放到一起，那么代码将会变得更加简洁。现状@Override public RechargeResponse recharge(RechargeRequest request) {
vue表单中上传图片并预览
最新发布
05-18
在 Vue 中上传图片并预览的方法如下： 1. 在模板中添加一个文件输入框和一个图片预览框： ```html ``` 2. 在 data 中定义一个 imageUrl 变量，用于存储上传图片的地址： ```js export default { data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值