搜索
首页web前端js教程jquery 图片上传按比例预览插件集合_jquery

js部分是这样的:

复制代码 代码如下:

//**********************图片上传预览插件************************
//作者:IDDQD(2009-07-01)
//Email:iddqd5376@163.com
//http://blog.sina.com.cn/iddqd
//版本:1.0

//说明:图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图

//参数设置:
//width 存放图片固定大小容器的宽
//height 存放图片固定大小容器的高
//imgDiv 页面DIV的JQuery的id
//imgType 数组后缀名
//**********************图片上传预览插件*************************
(function($) {
jQuery.fn.extend({
uploadPreview: function(opts) {
opts = jQuery.extend({
width: 0,
height: 0,
imgDiv: "#imgDiv",
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function() { return false; }
}, opts || {});
var _self = this;
var _this = $(this);
var imgDiv = $(opts.imgDiv);
imgDiv.width(opts.width);
imgDiv.height(opts.height);

autoScaling = function() {
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (img_width > 0 && img_height > 0) {
var rate = (opts.width / img_width if (rate if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgDiv.width(img_width * rate);
imgDiv.height(img_height * rate);
} else {
imgDiv.width(img_width);
imgDiv.height(img_height);
}
var left = (opts.width - imgDiv.width()) * 0.5;
var top = (opts.height - imgDiv.height()) * 0.5;
imgDiv.css({ "margin-left": left, "margin-top": top });
imgDiv.show();
}
}
_this.change(function() {
if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");
this.value = "";
return false;
}
imgDiv.hide();
if ($.browser.msie) {
if ($.browser.version == "6.0") {
var img = $("jquery 图片上传按比例预览插件集合_jquery");
imgDiv.replaceWith(img);
imgDiv = img;

var image = new Image();
image.src = 'file:///' + this.value;

imgDiv.attr('src', image.src);
autoScaling();
}
else {
imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
try {
imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value;
} catch (e) {
alert("无效的图片文件!");
return;
}
setTimeout("autoScaling()", 100);

}
}
else {
var img = $("jquery 图片上传按比例预览插件集合_jquery");
imgDiv.replaceWith(img);
imgDiv = img;
imgDiv.attr('src', this.files.item(0).getAsDataURL());
imgDiv.css({ "vertical-align": "middle" });
setTimeout("autoScaling()", 100);
}
}
});
}
});
})(jQuery);

页面部分:
复制代码 代码如下:
























声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
微信小程序实现图片上传功能微信小程序实现图片上传功能Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码示例。一、前期准备工作在开始编写代码之前,我们需要先下载并安装微信开发者工具,并注册成为微信开发者。同时,还需要了解微信

使用CakePHP框架实现图片上传和显示的步骤使用CakePHP框架实现图片上传和显示的步骤Jul 29, 2023 pm 04:21 PM

使用CakePHP框架实现图片上传和显示的步骤引言:在现代Web应用程序中,图片上传和显示是常见的功能需求。CakePHP框架为开发者提供了强大的功能和便捷的工具,使得实现图片上传和显示变得简单高效。本文将向您介绍如何使用CakePHP框架来实现图片上传和显示。步骤1:创建文件上传表单首先,我们需要在视图文件中创建一个表单,用于用户上传图片。以下是一个示例的

Vue中如何实现图片的滚动和缩略图预览?Vue中如何实现图片的滚动和缩略图预览?Aug 18, 2023 pm 01:51 PM

Vue中如何实现图片的滚动和缩略图预览?在Vue项目中,我们经常需要展示大量的图片,并希望用户能够方便地浏览和预览这些图片。本文将介绍如何使用Vue组件实现图片的滚动和缩略图预览功能。首先,我们需要安装并引入合适的Vue库,以便于实现图片的滚动和缩略图预览。在本例中,我们将使用vue-awesome-swiper和vue-image-preview两个库来实

Vue技术开发中如何处理图片上传和压缩Vue技术开发中如何处理图片上传和压缩Oct 08, 2023 am 10:58 AM

Vue技术开发中如何处理图片上传和压缩在现代web应用中,图片上传是一个非常常见的需求。然而,由于网络传输和存储等方面的原因,直接上传原始的高分辨率图片可能会导致上传速度慢和存储空间的大量浪费。因此,对于图片的上传和压缩是非常重要的。在Vue技术开发中,我们可以使用一些现成的解决方案来处理图片上传和压缩。下面将介绍如何使用vue-upload-compone

如何使用PHP和Vue实现图片上传功能如何使用PHP和Vue实现图片上传功能Sep 25, 2023 pm 03:17 PM

如何使用PHP和Vue实现图片上传功能在现代网页开发中,图片上传功能是非常常见的需求。本文将详细介绍如何使用PHP和Vue来实现图片上传功能,并提供具体的代码示例。一、前端部分(Vue)首先需要在前端创建一个用于上传图片的表单。具体代码如下:<template><div><inputtype="fil

使用Vue开发中遇到的图片上传和裁剪问题使用Vue开发中遇到的图片上传和裁剪问题Oct 08, 2023 pm 04:12 PM

标题:Vue开发中图片上传和裁剪问题及解决方法引言:在Vue开发中,图片上传和裁剪是常见的需求。本文将介绍在Vue开发中遇到的图片上传和裁剪问题,并给出解决方法和具体的代码示例。一、图片上传问题:选择图片上传按钮无法触发文件选择框:这个问题通常是因为没有正确绑定事件或者绑定的事件不生效。可以通过在模板中绑定点击事件,并在对应的方法中触发文件选择框。代码示例:

未来功能抢先用 Safari 技术预览 173 版本释出未来功能抢先用 Safari 技术预览 173 版本释出Jul 02, 2023 pm 01:37 PM

Apple今日释出了Safari技术预览173版本,涵盖部分可能于Safari17推出的功能。该版本适用于macOSSonoma测试版以及macOSVentura系统,有兴趣的用户可于官方网页下载。Safari技术预览173版于设定中新增了功能标志区块,取代原先开发菜单的实验功能。该区块可让开发者快速地搜索特定功能,并以不同形式将「稳定」、「可供测试」、「预览」或「开发人员」等状态标示出来。重新设计的开发菜单可以帮助创作者更容易找到关键工具,以便建立网页、网页应用程序、其他应用程序中的网页内容、

如何使用ThinkPHP6实现图片上传如何使用ThinkPHP6实现图片上传Jun 20, 2023 pm 09:25 PM

随着互联网的发展,图片上传已经成为了网站和应用程序开发中的一个必不可少的功能。而在PHP领域,ThinkPHP6已经成为了一款非常流行的开发框架。在本文中,我们将介绍如何使用ThinkPHP6实现图片上传。一、创建项目和控制器首先,我们需要创建一个新的ThinkPHP6项目。可以使用Composer进行安装,也可以在官网下载最新版。安装完成后,在控制台中进入

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),