正文 

当前位置： 首页 > java > java教程

jquery图片上传前先在本地预览（不经过后端处理）

NickTong NickTong     2022-08-29     499

关键词：

前段时间遇到一个问题，前端想实现图片上传预览（不经过后端PHP或JAVA处理），用户点击file按钮上传文件，点击确定马上就能看到预览的效果，但在实现的时候无论怎样都取不到file上图片的真实路径，得到的反而是C:fakepatha.jpg，这个路径是错误的。百度之后得到说浏览器基于保护用户的相关安全措施，隐藏了上传的真实路径，用fakepath代替，当然，调整浏览器的相关安全设置可以解决这个问题。但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传，这种方法在网络交互上显然不现实。

/*
*名称:图片上传本地预览插件 v1.1
*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari
*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm
*参数说明:
　　Img:图片ID;
　　Width:预览宽度;
　　Height:预览高度;
　　ImgType:支持文件类型;
　　Callback:选择文件显示图片后回调方法;
*使用方法:
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />

把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件

$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});

实例：

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
                }
//高版本Jquey使用  if ($.support.leadingWhitespace)
                if ($.browser.msie) { //低版本jquery中使用的方式
                    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()
            }
        })
    }
});

调用：

$(function () {
    $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});

HTML结构：

<div>
<img id="ImgPr" width="120" height="120" />
</div>
<input type="file" id="up" />

 

jquery怎么打开本地图片预览，点击确定后上传

如图，点击开打图片，只能打开一张jpg/png/jpeg/jpeg/gif图片，当选定图片后，如图的三个图片框要显示选中的图片，并且输出本地图片路径，如图，点击确定更换后再上传图片到服务器，并且输出上传服务器的图片地址参考技术A1,... 查看详情

jquery实现图片预览

摘自：http://www.cnblogs.com/leejersey/p/3660202.htmlJS代码：/**名称:图片上传本地预览插件v1.1*作者:周祥*时间:2013年11月26日*介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE谷歌火狐)不支持safari*插件网站:http://keleyi.com/keleyi/phtml/im... 查看详情

jquery:[1]实现图片上传并预览

jQuery:[1]实现图片上传并预览原理预览思路1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；2.把对象URL赋值给实现写好的img标签的src属性File对象　　File对象可以用来获取文件的信息，还可以用来读取这... 查看详情

图片本地上传预览

在IE里面显示的话，你可以用div直接显示图片，不通过img来添加SRC，这样就不会有小图标出现例子：<divclass="banner_up_pic"id="imgPreDiv"></div>varfile_upl=document.getElementById("file"); file_upl.select(); 获取图片路径 varim 查看详情

js上传图片本地预览缓存

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title><scriptsrc="jQuery.js"></script><styletype="text/css">#file{display:block;width: 查看详情

juincenweb中图片上传处理jquery+ajax+springmvc

今天做项目有个需求，页面上需要上传一个图片，之前解决了一次，没有记下来。在前台用户先选择一张图片，然后可以预览，再上传，我是这样解决的。预览：html里面有一个普通的input标签，id：uploadFile<inputtype="file"id="upload... 查看详情

本地多个图片上传预览，删除

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="js/jquery-2.1.4.min.js"type="text/javascript"charset="utf-8"></s 查看详情

上传图片时预览

简述　　　　本文的使用场景主要是用户修改头像，选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。1.首先，页面上有一个input[type=‘file‘]标签<inputid="head"name="headPortrait"class="btnbtn-xmbtn-outlinebtn-primary"style="margin:... 查看详情

3种上传图片并实现预览的方法

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图... 查看详情

带预览和删除、Jquery 和 Javascript 的多张图片上传

】带预览和删除、Jquery和Javascript的多张图片上传【英文标题】：MultipleImageuploadwithpreviwanddelete,JqueryandJavascript【发布时间】：2020-09-2707:24:24【问题描述】：我这里有问题。我使用此代码多次选择和预览图像，但我需要删除选定的... 查看详情

javascript实现本地图片上传预览功能（兼容iechromeff）(代码片段)

摘要本人个人nodejs分享论坛：tnodejs.com参考：http://blog.csdn.net/nhconch/article/details/7295456需要解决的问题有：本地图片如何在上传前预览、编辑；最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码... 查看详情

html5上传本地图片,在线预览及裁剪(filereader,canvas)

...下，使用filereader方法无需和后台交互，代码如下：//本地图片在上传之前的预览效果//图片上传预览functionpreviewImage(file){if(file.files&&file.files[0]){varimg=document.getElementById(‘imghead‘);varreader=newFi 查看详情

关于h5里的api，上传图片预览功能

FileReader：读取本地图片文件并显示写在开头之前公司要求做一个H5页面，功能是照相和选择相册相片，并且能在屏幕上预览。然后我就傻里吧唧的各种找插件，因为有些插件不适配手机的型号，安卓机基本死掉，苹果有时候也会... 查看详情

js兼容各个浏览器的本地图片上传即时预览效果

...面的的问题，所以也就做了个简单的demo来实现本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码之前... 查看详情

本地上传图片预览

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>图片上传本地预览，获得图片的base64(可压缩)</title><styletype="text/css">.uplo 查看详情

图片上传组件开发(代码片段)

图片上传，作为web端一个常用的功能，在不同的项目中有不同的需求，在这里实现一个比价基本的上传图片插件，主要能实现图片的浏览，剪裁，上传这三个功能，同时也是为了让自己对图片／文件上传和HTML5中名声在外的canvas... 查看详情

jquery实现上传图片及图片大小验证图片预览效果代码

jquery实现上传图片及图片大小验证、图片预览效果代码jquery实现上传图片及图片大小验证、图片预览效果代码上传图片验证*/   functionsubmit_upload_picture(){    varfile=$(‘file_c‘).value;    if(!/.(g... 查看详情

微信小程序如何给服务器上传多张图片,微信小程序实现上传多张本地图片到服务器和图片预览...

...上传多个文件，于是自己写了一个上传多个的方法。[图片上传失败...(image-c4d973-1610865751169)]2，需求博主做的是用户投诉页面；需求是用户上传最多三张图片，最后把图片和文字和用户信息等一起 查看详情