jq图片上传功能

//图片上传功能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()            }        })    }});

//上传图片$("#doc").uploadPreview({ Img: "preview"});//上传图片

原文地址：https://www.cnblogs.com/asylm/p/8473337.html

时间： 2024-08-09 22:00:47

jq图片上传功能的相关文章

thinkphp实现UploadFile.class.php图片上传功能

图片上传在网站里是很常用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,下面是实现方法 1.我们首先需要创建一个表复制代码代码如下: CREATE TABLE IF NOT EXISTS `tp_image` ( `id` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(200) NOT NULL, `create_time

（转）淘淘商城系列——实现图片上传功能

http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项目中添加商品时上传图片的功能还没实现,如下图所示.本文将花大量笔墨来教大家如何实现图片上传这个功能. 我们来看下item-add.jsp页面,可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的,在<a>标签的下方是一个隐藏域,是用来接收图片上传到图片服务器的回显地址

在SAE上使用Ueditor的图片上传功能

SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务. 一.开通Storage服务在SAE控制台开通Storage服务,并新增一个domain. 二.修改Ueditor代码 Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的 #上传附件 @csrf_exempt def UploadFile(request,uploadtype,uploadpath): '''

用jsp实现简单的图片上传功能（multipart/form-data形式的表单）

2008-10-11 22:07 用jsp实现简单的图片上传功能 1 先做一个页面,选择上传的图片<body> <form action="uploadServlet" enctype="multipart/form-data" method="POST" > selectimage: <input type="file" name="myfile"/&

vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:

给DEDECMS广告管理中增加图片上传功能

dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可. 效果图: 原文地址:https://www.cnblogs.com/liu-zhijun/p/11404535.html

微信小程序之商品发布+编辑功能（多图片上传功能）

小程序的商品发布页面:功能有多图片上传遇到的问题记录一下: 1.uploadFile成功之后返回的参数是json字符串,一定要用JSON.parse转换为object格式 2.因为商品发布和编辑都是在同一个页面,因为异步的问题,在编辑页获取商品类别经常失败,所以这里在获取类别成功之后再获取商品详情 3.判断两位小数正则:/^\d+(.\d{1,2})?$/ 4.使用picker一些注意的地方: <picker name="category" mode="selecto

java web开发图片上传功能

基本思路在于,配置路径,然后用java I/O的api将图片上传到该目录下. String photoPath = ServletActionContext.getServletContext().getRealPath("/user/photo/" + username); 这句是获取服务器下的目录+username 而username通过session获取. 这是一个图片上传action的方法: public String execute() throws Exception

单独调用Ueditor的图片上传功能

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="/scripts/jquery-1.8.3.min.js"></script> 6 <script src="/ueditor/ueditor.config.js" type="text/javascript">&l