Jquery自定义图片上传插件
1 概述
编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下:
2、该图片上传插件实现功能如下:
1>能够异步上传,上传成功之后,服务器返回响应结果;能够定义上传前和上传后自定义处理方式;
2>能够实现文件格式判断,过滤非图片文件;
3>服务端能够过滤重复上传的图片;
3、页面代码分析:
1>、Jquery图片上传插件代码如下:
// 选中文件, 提交表单(开始上传)
(function ($) {
var iframe;
var form;
var opeartData=null; $.uploadDefault = {
url: '',
fileName: 'filedata',
dataType: 'json',
imgshow: '',
onSend: function(){ return true; },
onSubmit: function () { return true; },
onComplate: function () { return true; }
}; $.UpLoadForm = { //图片格式验证
$PicChange: function (obj)
{
if (opeartData.imgshow != null && opeartData.imgshow != '')
{
$("#" + opeartData.imgshow).val($(obj).val());
}
}, //判断pic格式是否正确
$IsPicCheck: function (fileName)
{
if (fileName != null && fileName != "") {
//lastIndexOf如果没有搜索到则返回为-1
if (fileName.lastIndexOf(".") != -) {
var fileType = (fileName.substring(fileName.lastIndexOf(".") + , fileName.length)).toLowerCase();
var suppotFile = new Array();
suppotFile[] = "jpg";
suppotFile[] = "gif";
suppotFile[] = "bmp";
suppotFile[] = "png";
suppotFile[] = "jpeg";
for (var i = ; i < suppotFile.length; i++) {
if (suppotFile[i] == fileType) {
return true;
} else {
continue;
}
}
return false;
} else {
return false;
}
}
}, $ImgUpLoad: function () {
if (opeartData == null)
{
//没有选择图片或者图片已经上传
return;
}
opeartData = $.extend($.uploadDefault, opeartData);
var canSend = opeartData.onSend();
if (!canSend) {
return;
}
if (!opeartData.onSubmit())//图片验证
{
return;
}
form.submit();
iframe.load(function() {
var contents = $(this).contents().get();
var data = $(contents).find('body').text();
if ('json' == opeartData.dataType) {
data = window.eval('(' + data + ')');
}
opeartData.onComplate(data);
setTimeout(function() {
iframe.remove();
form.remove();
opeartData = null;
}, );
});
}, $OpenFIle: function (options) {
opeartData = $.extend($.uploadDefault, options);
if (opeartData.url == '') {
return;
}
var frameName = 'upload_frame_0';
var formName = 'upload_form_0';
if ($("#" + formName).length > ) {
iframe = $("#" + frameName);
form = $("#" + formName);
}
else {
iframe = $('<iframe style="position:absolute;top:-9999px" id="' + frameName + '" />').attr('name', frameName);
form = $('<form method="post" style="display:none;" id="' + formName + '" enctype="multipart/form-data" />').attr('name', 'form_' + frameName);
form.attr("target", frameName).attr('action', opeartData.url);
// form中增加数据域
var formHtml = '<input type="file" name="' + opeartData.fileName + '" onchange="$.UpLoadForm.$PicChange(this)")"/>';
form.append(formHtml);
iframe.appendTo("body");
form.appendTo("body");
}
var fileInput = $('input[type=file][name=' + opeartData.fileName + ']', form);
fileInput.click();
}
}
})(jQuery);
2>前台页面调用代码如下,Jquery插件,别忘记引入Jquery对应js:
<script type="text/javascript">
$(function () {
$("#imagetx").bind("click", function () {
$.UpLoadForm.$OpenFIle({
// 上传地址
url: '../upload/UploadImg',
// 文件域名字
fileName: 'upimage',
// 其他表单数据
imgshow: 'imagetx',
// 上传完成后, 返回json, text
dataType: 'json',
// 上传之前回调,return true表示可继续上传
onSend: function () {
$.ShowLoadDialog();
return true;
},
onSubmit: function () {
var picpath = $("#imagetx").val();
console.log(picpath);
if (!$.UpLoadForm.$IsPicCheck(picpath))
{
$.ShowLoadDialogClose();
$TipDialog("图片上传", "请上传jpg、gif、bmp、png、jpeg格式的图片!");
return false;
}
return true;
},
// 上传之后回调
onComplate: function (data) {
$.ShowLoadDialogClose();
if (data != null)
{
console.log(data)
if (data.errorcode == "") {
$("#showpic").attr("src", data.picurl);
}
else {
$TipDialog("图片上传", "图片上传失败");
}
}
}
});
});
$("#btnupload").bind("click", function () {
$.UpLoadForm.$ImgUpLoad();
}) });
</script>
3>后台服务器验证:
[HttpPost]
public JsonResult UploadImg(HttpPostedFileBase upimage)
{
string pic = "", error = "",pcode="";
try
{
if (upimage != null)
{
string fileName = DateTime.Now.ToString("yyyyMMdd") + System.IO.Path.GetFileName(upimage.FileName);
string[] pictext = { ".jpg",".gif",".bmp",".png",".jpeg" };
string extenname= System.IO.Path.GetExtension(fileName);
if (pictext.Contains(extenname))
{
string filePhysicalPath = Server.MapPath("~/Upload/Images/" + fileName);
upimage.SaveAs(filePhysicalPath);
pic = "/Upload/Images/" + fileName;
}
else
{
error = "";
pic =pic ;
}
}
}
}
catch (Exception ex)
{
error = ex.Message;
}
return Json(new
{
errorcode = error,
picurl = pic,
piccode = pcode
});
}
图片上传也就完成,展示的效果也如上面所示;
Jquery自定义图片上传插件的更多相关文章
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...
- 赞!带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
- jquery uploadify文件上传插件用法精析
jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...
- 带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...
- ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名
今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...
- Aps.net中基于bootstrapt图片上传插件的应用
Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...
- ssm项目中KindEditor的图片上传插件,浏览器兼容性问题
解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
随机推荐
- Android 内容提供器(Content Provider)介绍
内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访问数据的安全性.目前,使用内容 ...
- DICOM医学图像窗口变换的加速算法
详见:http://pan.baidu.com/s/1gfFLbJ9 DICOM医学图像窗口变换的加速算法* 张尤赛 ,陈福民 ( 同济大学计算中心, 上海 200092 ) (华东船舶工业学院电子与 ...
- 2016年11月2日--Window.document对象
一.找到元素: docunment.getElementById("id"): 根据id找,最多找一个: var a =docunment ...
- 修改vb程序图标
1. 2.
- JQ添加标签
<script type="text/javascript" src="http://files.cnblogs.com/914556495wxkj/jquery- ...
- struts2 action 3中书写方式
1.pojo类 简单的javabean 类 需要有 public String execute(){return null;} 2.实现 Action 借口 重写 execute 3.继承 Ac ...
- centos 7 升级后yum install出现Exiting on user cancel
centos 7 升级后yum install出现Exiting on user cancel centos 7.x升级后用yum install进行安装时经常出现Exiting on user ca ...
- NSIS脚本入门和进阶方法
NSIS(Nullsoft Scriptable Install System)是一个开源的 Windows 系统下安装程序制作程序.它提供了安装.卸载.系统设置.文件解压缩等功能.对于新手来说,它有 ...
- Mingw32 for ffmpeg
2016.02.27之后, ffmpeg 官方不在支持 XP 系统,需要下载源码自己编译. 整了好几天搭建了 MinGW32 for XP 安装了 ffmpeg 所需的几乎所有的库文件. 除了 lib ...
- Django~Models2
Generally, each model maps to a single database table. Each attribute of the model represents a data ...