JQUERY 图片上传预览插件

最新推荐文章于 2023-11-03 18:00:55 发布
最新推荐文章于 2023-11-03 18:00:55 发布
阅读量1.1k 收藏 1
点赞数
文章标签： java 图片 jquery
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 ( /msie/.test ) {
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()
}
})
}

});



HTML代码：
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="16/uploadPreview.js" type="text/javascript"></script>
<script>
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div><img id="ImgPr" width="120" height="120" /></div>
<div><input type="file" id="up" />
</div>
</body>
</html>

骑着骆驼看泉水
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery选择多张图片批量上传插件
10-25
jQuery选择多张图片批量上传插件 jQuery选择多张图片批量上传插件
使用 jquery-file-upload 插件实现图片上传功能
@必意玲
02-16 8675
获取了文件框的元素 调用fileupload函数即可 只要引入了插件 jquery对象上都会有这个函数就可以调用。这里我用的 files.pic1 接收，所以客户端必须根据 pic1 传参数到服务端。jQuery File Upload 需要引入的包。
viewer.js图片预览插件(案例含jquery分页插件)
cai niaoyihao_的博客
04-15 5418
viewerJS图片预览插件，实现图片放大、切换、拖动等预览效果
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
Python代码大全
12-14 1685
服务端处理没有特殊的限制，只要服务端接受file表单提交的数据处理后返回json格式数据，上传成功返回的json数据里必须含有code和src，其中code必须为200，src是上传后的图片url，上传失败返回的json数据里必须含有code和msg，其中code为错误码(不能是200)，msg为错误信息。jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档。以./upload1.php为例。程序包内含使用Demo。
vue 上传照片插件
weixin_45525177的博客
11-03 471
参考文章：http://blog.ncmem.com/wordpress/2023/11/03/vue-%e4%b8%8a%e4%bc%a0%e7%85%a7%e7%89%87%e6%8f%92%e4%bb%b6/总的来说，Vue上传照片插件提供了一种简单、便捷的方式来上传图片，并无需编写大量冗长的代码。上传照片插件能够快速地将照片上传到服务器，支持多图上传、拍照上传和拖拽上传等功能。此外，插件还可以对上传过程进行自定义，如上传时的进度条显示、图片大小限制等。其中，上传照片插件是Vue的常用插件之一。
jquery图片上传预览插件
07-12
jquery图片上传预览插件，通过 IE6、7、8、9 , chrome, firefox测试，测试时采用的是jquery1.7.1，未经过其它jquery版本测试。 使用时，您可以根据需要，随意修改！
jquery图片上传预览插件支持多图片上传预览代码
11-24
在本文中，我们将深入探讨如何使用jQuery实现一个支持多图片上传预览的插件。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务，因此非常适合用于构建用户友好的图片上传预览功能。...
jQuery H5移动端图片预览插件
最新发布
05-22
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
JQuery图片上传预览案例
02-20
在本文中，我们将深入探讨如何使用JQuery实现一个图片上传预览功能，这是一个常见的前端交互需求，特别是在社交媒体和电子商务网站中。JQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及AJAX请求，...
FormData图片上传预览插件
06-24
在FormData图片上传预览插件中，jQuery用于处理DOM操作和事件监听，使代码更简洁、易维护。 2. **图片上传**：图片上传是指用户通过网页将本地图片文件上传到服务器的过程。在FormData插件中，这一过程被优化，用户...
jQuery带删除功能多图片上传预览插件
12-08
jQuery带删除功能多图片上传预览插件，支持个浏览器。。。。。。。。。。。。。
多图片上传预览插件
05-21
多图片上传，在线预览，支持拖搁
jQuery多图上传插件imgUp.js
lnmghh的博客
08-07 9015
关于imgPlugin.js上传文件的使用
html中批量上传图片插件,轻量级图片批量上传JS插件（可选择多图）
weixin_30035343的博客
06-04 793
【实例简介】插件功能1、批量选择图片，限制限制图片的类型 (通过限制file的accept) 默认:accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"2、可以自定义限制选择图片的数量，默认5张3、可以自定义限制图片的最大宽度和最大高度，默认都是10000px4、可以自定义限制图片的单文件大小，默认是4MB【实例截图】【核心代码】v...
html5的图片上传插件,分享5个好用的javascript文件上传插件
weixin_34378986的博客
06-04 1794
文件上传是我们开发网站程序时经常遇到的功能，选择一个功能强大，使用简单的上传插件可以节省我们很多开发时间，下面就为大家介绍5个不错的javascript文件上传插件Mini AJAX File Upload Form这个插件的UI和体验都非常棒，不过它依赖于下面介绍的jQuery File Upload plugin。特点支持多文件上传支持一次选择多个文件上传可上传任意文件拖拽支持无需flash小...
jQuery图片批量上传插件
ICode联盟
02-06 299
jQuery图片批量上传网页插件，可以实现上传图片预览拖拽排序，编辑图片功能支持多个多图上传功能特效。
实用插件（四）图片上传前预览插件
front_end_fan
08-04 2300
注：该插件app项目，pc项目都可使用1、由于插件为轻量级，直接附上源码和demo<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片上传前预览</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <styl
jQuery带预览的图片上传插件
ICode联盟
08-25 114
下载地址jQuery带预览效果的图片上传插件 dd:
jQuery带预览功能焦点图插件IPresenter
ICode联盟
11-30 111
下载地址 jQuery轮播图插件IPresenter是一款简单而强大的jQuery插件，可以很容易地设计高级CSS3的演示文稿，画廊和滑块。高度灵活和可定制的。 高度的用户界面设计。 多个实例在一个HTML页面允许。 每张幻灯片宽松定制。 多语言支持。 在iOS和Android设备厂。 自动幻灯片上悬停可选的停顿。 与外部兼容的字体（如谷歌字体）。 动画预加载杆。 键盘支持。 触摸支持。 通过CSS定制。 无限的过渡效果。 自定义幻灯片超时。 提示缩略图预览。 公共方法，性能和回调API（走滑，播放幻灯片
jquery文件上传插件
07-01
其次，jQuery文件上传插件支持文件的预览和限制。用户在选择文件时，插件可以提供一些文件过滤选项，例如文件类型、文件大小等，帮助用户筛选有效文件。并且，一些插件还可以提供文件预览功能，用户可以在选择文件前...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值