头像上传前本地预览功能的实现(兼容ie8)

最新推荐文章于 2021-12-21 10:42:58 发布
最新推荐文章于 2021-12-21 10:42:58 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： JavaScript ie8兼容 文章标签： ie 8 javascript 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38627581/article/details/78436107
版权

以下代码为头像的上传前预览功能的实现，UI可自行发挥。可用form表单提交文件，也可使用jquery.form.js插件实现。下面demo中使用的form提交。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="demo.php" enctype="multipart/form-data">
    <input type="file" id="up" name="userImg">
    <img id="ImgPr" width="120" height="120"/>
    <input type="submit"/>
</form>
<script src="jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        $("#up").uploadPreview();
    });
</script>
<script>
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            var _self = this,
                    _this = $(this);
            opts = jQuery.extend({
                //指定预览照片的容器
                Img: "ImgPr",
                //指定容器宽高
                Width: 100,
                Height: 100,
                //指定可上传文件的类型
                ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                Callback: function () {}
            }, opts || {});
            _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
            };
            _this.change(function () {
                if (this.value) {
                    if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
                        this.value = "";
                        return false
                    }
                    if ($.browser.msie) {
                        try {
                            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                        } catch (e) {
                            var src = "";
                            var obj = $("#" + opts.Img);
                            var div = obj.parent("div")[0];
                            _self.select();
                            if (top != self) {
                                window.parent.document.body.focus()
                            } else {
                                _self.blur()
                            }
                            src = document.selection.createRange().text;
                            document.selection.empty();
                            obj.hide();
                            obj.parent("div").css({
                                'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                                'width': opts.Width + 'px',
                                'height': opts.Height + 'px'
                            });
                            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
                        }
                    } else {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                    }
                    opts.Callback()
                }
            })
        }
    });
</script>
</body>
</html>


云_飞扬
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现头像预览
04-06
NULL 博文链接：https://masterlim.iteye.com/blog/1545339
头像预览
学习记录
11-15 1594
http://www.w3.org/1999/xhtml"> Firefox3,IE6,IE7,IE8上传图片预览 #preview_wrapper{     display:inline-block;     width:100px;     height:100px;     background-color:#FFFFFF; } #preview_fake{ /*
ie8 springmvc图片上传预览
yinyichao0107的专栏
01-07 1273
开始设想使用input file上传组件，使用js的FileReader进行图片的预览功能， function upload(){ $("#fileUP").click(); } function preview(){ var img = document.getElementById('fileXS'); img.width  =  155; img.height =  155
上传头像实现预览功能
weixin_44575964的博客
07-16 386
<div class="layui-form-item"> <label class="layui-form-label"> <span class="x-red">*</span>商品缩略图 </label> <div class="lay.
兼容IE6,IE7,IE8和Firefox的图片上传预览效果
03-28
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
头像上传预览剪切组件 v2.1
12-07
flash头像上传组件功能介绍 1....支持头像拍照拍摄保存 3.支持上传成功，js 回调...兼容性好，任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用 5.上传并预览，用户可以任意选择区域，支持头像旋转 6.无
使用canvas实现仿新浪微博头像截取上传功能
09-03
这篇文章将介绍如何使用canvas来实现一个仿新浪微博的头像截取上传功能。 首先，canvas是HTML5中引入的一个强大的绘图工具，它允许开发者在网页上直接进行图像处理。在本例中，我们创建两个canvas元素：一个用于...
支持ie 789兼容预览头像上传
09-22
支持ie 789兼容预览头像上传
JS实现上传图片的三种方法并实现预览图片功能
11-30
方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。 以下是实现上述思路的方法： 1. 模板文件 <!DOCTYPE html> <html lang="en"> <head> <meta ...
上传插件支持ie8
03-26
上传插件支持ie8，用于pc端或h5页支持ie8、ie9、ie10、ie11
ie6，ie7，ie8和firefox下兼容的图片上传预览
03-20
NULL 博文链接：https://669341085.iteye.com/blog/874153
图片预览（兼容IE8）JS代码（包含demo）
02-28
此图片预览插件为JS代码，具体可以在我的博客中看，如果没有资源的话，可以私聊博主。 这款插件最好的地方在于可以兼容IE8。
博客系统—头像预览功能实现
weixin_30832351的博客
09-18 189
使用知识点： jquery的change事件，当输入域发生变化时触发改变事件 DOM对象的onload加载事件 html5的文件读取方法FileReader() 转载于:https://www.cnblogs.com/lucaq/p/7544972.html...
javascript上传预览图片（IE8支持）
u014798510的博客
07-22 4771
html: <input type="file" multiple="true" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> javasc
兼容ie8 上传
weixin_42286461的博客
12-21 482
页面 <body> <form id="uploadFile"> <input class="ui-file-input" id ="fileload" name="file" type="file" change="fileLoadExcel" > </form> </body> <script type="text/javascript" src="../jquery/jque...
IE8上传word文件
yuyuyumeimeimei的博客
03-14 240
背景：刚开始开发word上传功能时，用的formdata的格式传给后台 问题：后来客户那边说明情况，用的IE8，在用formdata传值时，在后端request不能强转为MultipartHttpServletRequest 调查原因：因为IE8不支持FormData，IE10才支持，因此此方法不兼容IE10以下的浏览器 解决方法：使用jquery.form.js支持的ajaxsubmit进...
IE8下上传文件方式
杨鹏飞的博客
05-31 3685
1.准备页面， 加入   2.在js中加入 //图片预览chacgeImg function chacgeImg(value){ jQuery("#loadgif").css("display","block"); var imgType=value.substring(value.lastIndexOf("."
ssm上传头像功能实现
最新发布
05-05
实现 SSM 上传头像功能，需要在前端页面设计一个上传头像的表单，然后在后端编写上传接口。 1. 前端页面设计 在前端页面中，需要添加一个上传头像的表单，可以使用 HTML 的 form 标签来实现。代码如下： ```html <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="submit" value="上传头像"/> </form> ``` 其中，`action` 属性指定了上传接口的 URL，`method` 属性指定了请求的方法为 `POST`，`enctype` 属性指定了表单数据的编码方式为 `multipart/form-data`，这样才可以上传文件。 2. 后端上传接口实现 在后端中，需要使用 Spring MVC 的 `MultipartFile` 类来处理上传的文件。代码如下： ```java @Controller public class UploadController { @RequestMapping(value = "/upload", method = RequestMethod.POST) public String upload(@RequestParam("file") MultipartFile file, HttpSession session) throws IOException { // 获取上传的文件名 String fileName = file.getOriginalFilename(); // 获取文件的后缀名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 生成新的文件名 String newFileName = UUID.randomUUID().toString() + suffixName; // 保存文件到本地磁盘 File dest = new File("upload/" + newFileName); file.transferTo(dest); // 将文件路径保存到 session 中 session.setAttribute("avatarPath", dest.getAbsolutePath()); return "redirect:/user/profile"; } } ``` 在上传接口中，`@RequestParam("file")` 注解表示接收名为 `file` 的文件参数，`HttpSession` 是用来保存文件路径的对象。首先，获取上传的文件名，并生成新的文件名，然后将文件保存到本地磁盘，最后将文件路径保存到 session 中，以便后续使用。 3. 显示头像 在用户个人信息页面中，可以通过 session 中保存的文件路径来显示用户的头像。代码如下： ```html <img src="${sessionScope.avatarPath}" alt="avatar"> ``` 通过 `${sessionScope.avatarPath}` 取出 session 中保存的文件路径，并将其作为 `src` 属性值赋给 `<img>` 标签，即可显示用户的头像。 以上就是实现 SSM 上传头像功能的步骤。需要注意的是，上传文件时需要对文件进行校验和限制，以保证文件的安全性和上传效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值