jquery 上传图片转为base64，ajax提交到后台
支持多张图片上传、图片上传数量修改、可以删除 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>jquery 图片base64</title>
<script type="text/javascript" src="http://s28.9956.cn/static/v4/js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.popup-box {z-index:1010;}
.img-div {border:1px solid #ddd;border-radius:100%;float:left;line-height:1;margin-left:5px;overflow:hidden;}
/*上传图片插件的样式*/.fl {float:left;}
.img-box .up-p {margin-bottom:20px;font-size:16px;color:#555;}
.z_photo .z_file {position:relative;}
.z_file .file {width:100%;height:100%;opacity:0;position:absolute;top:0px;left:0px;z-index:100;}
.z_photo .up-section {position:relative;margin-right:20px;border:1px solid #fff;}
.up-section .close-upimg {position:absolute;top:6px;right:8px;display:none;z-index:10;}
.up-section .up-span {display:block;width:100%;height:100%;visibility:hidden;position:absolute;top:0px;left:0px;z-index:9;}
.up-section:hover {border:1px solid #1BBE60;}
.up-section:hover .close-upimg {display:block;}
.z_photo .up-img {display:block;width:100%;}
.loading {border:1px solid #D1D1D1;background:url( https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502943583253&di=196b6df604a7489dc247a217bf05c0b5&imgtype=0&src=http%3A%2F%2Fwww.xjsheying.com%2Fqqwebhimgs%2Fuploads%2Fbd565372.jpg) no-repeat center;}
.up-opcity {opacity:0;}
.img-name-p {display:none;}
.upimg-div .up-section {width:140px;height:130px;overflow:hidden;}
.img-box .upimg-div .z_file {width:140px;height:130px;overflow:hidden;}
.z_file .add-img {display:block;width:140px;/* height:130px;*/}
/*遮罩层样式*/.mask {z-index:1000;display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.4);}
.mask .mask-content {width:500px;position:absolute;top:50%;left:50%;margin-left:-250px;margin-top:-80px;background:white;height:160px;text-align:center;}
.mask .mask-content .del-p {color:#555;height:94px;line-height:94px;font-size:18px;border-bottom:1px solid #D1D1D1;}
.mask-content .check-p {height:66px;line-height:66px;position:absolute;bottom:0px;left:0px;width:100%;}
.mask-content .check-p span {width:49%;display:inline-block;text-align:center;color:#1BBE60;font-size:18px;}
.check-p .del-com {border-right:1px solid #D1D1D1;}
</style>
</head>
<body>
<form enctype="multipart/form-data">
<textarea id="testArea" style="display: block; width: 100%;height: 30px;"></textarea>
<div class="img-box full">
<div class=" img-section">
<div class="z_photo upimg-div clearfix" >
<div class="z_file fl">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1502933359&di=adbb58e41f757cee3f62d2529d9ba5d6&src=http://pic.58pic.com/58pic/16/14/96/80T58PIC8Av_1024.jpg" class="add-img">
<input style="width: 140px;height: 130px;" type="file" name="file" id="testFile" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="multiple" />
</div>
</div>
</div>
</div>
<div class="mask works-mask">
<div class="mask-content">
<p class="del-p ">您确定要删除图片吗？</p>
<p class="check-p"><span class="del-com wsdel-ok" style="width:49%;margin-right: 0;margin-top: 0;">确定</span><span class="wsdel-no" style="width:49%;margin-right: 0;margin-top: 0;">取消</span></p>
</div>
</div>
<button type="button" class="submit submitjc" style="margin-left: 0;">提交</button>
</form>
<script type="text/javascript">
$("#testFile").change(function () {
run(this);
});
$(".submitjc").click(function(){ var data_arr = {};
data_arr.prid = {$detail['pr_id']};
data_arr.prName = '{$detail['pr_name']}';
data_arr.comName = '{$detail['companyInfo']['companyName']}';
data_arr.comId = {$detail['com_id']};
data_arr.type = $("#type").val();
data_arr.code = {$detail['pr_code']};
data_arr.content = $("#jccontent").val();
data_arr.file = $("#testArea").val();
//data_arr.file = $("#file")[0].file; $.ajax({
type: 'Post',
url: '/chanpin/{$detail['pr_id']}/correction/',
data: data_arr,
async: false,
success: function (result) {
alert("提交成功");
$(".popup-box").hide();
$("#jccontent,#file,#testArea").val("");
$(".up-section").remove();
$(".z_file").show(); if (result.Code == 200) {
alert(result.Data);
} else {
}
} });
});
function run(input_file) {
/*input_file：文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if (typeof (FileReader) === 'undefined') {
alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
} else {
try {
/*图片转Base64 核心代码*/
var file = input_file.files;
for(var i= 0;i<file.length;i++) {
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file[i].type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function () {
if(flag){
var currVal = $('#testArea').val();
if(!(currVal.length===0 || currVal ==null)) currVal+='#';
$('#testArea').val(currVal+this.result);
}
}
reader.readAsDataURL(file[i]);
}
} catch (e) {
alert('图片转Base64出错啦！' + e.toString())
}
}
}
// <!-- 上传图片 -->
var flag = true;
$(function(){
var delParent;
var defaults = {
fileType : ["jpg","png","bmp","jpeg","gif"], // 上传文件的类型
fileSize : 1024 * 1024 * 2 // 上传文件的大小 10M
};
/*点击图片的文本框*/
$(".file").change(function(){
flag = true;
var idFile = $(this).attr("id");
var file = document.getElementById(idFile);
var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
var input = $(this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > 3 || totalNum > 3 ){
flag = false;
alert("上传图片数目不可以超过3个，请重新选择"); //一次选择上传超过3个 或者是已经上传和这次上传的到的总数也不可以超过3个 }
else if(numUp < 3){
fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
var imgUrl = window.URL.createObjectURL(fileList[i]);
imgArr.push(imgUrl);
var $section = $("<section class='up-section fl loading'>");
imgContainer.append($section);
var $span = $("<span class='up-span'>");
$span.appendTo($section); var $img0 = $("<img class='close-upimg'>").on("click",function(event){
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.attr("src","{$resDomainPath}/product/images/a7.png").appendTo($section);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
$input.appendTo($section);
var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
$input2.appendTo($section); }
}
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >= 3){
$(this).parent().hide();
}
}); $(".z_photo").delegate(".close-upimg","click",function(){
$(".works-mask").show();
delParent = $(this).parent();
}); $(".wsdel-ok").click(function(){
$(".works-mask").hide();
var numUp = delParent.siblings().length;
if(numUp < 4){
delParent.parent().find(".z_file").show();
}
delParent.remove(); // delParent 删除图片的base64
var selImg = $(".up-section"),
selImgValue = $('#testArea').val().split('#'),
delIndex = 0;
for(var i = 0;i<selImg.length;i++) {
if(selImg[i] === delParent[0]) {
delIndex = i;break;
}
}
selImgValue.splice(delIndex, 1);
$('#testArea').val(selImgValue.join('#'));
}); $(".wsdel-no").click(function(){
$(".works-mask").hide();
}); function validateUp(files){
var arrFiles = [];//替换的文件数组
for(var i = 0, file; file = files[i]; i++){
//获取文件上传的后缀名
var newStr = file.name.split("").reverse().join("");
if(newStr.split(".")[0] != null){
var type = newStr.split(".")[0].split("").reverse().join("");
console.log(type+"===type===");
if(jQuery.inArray(type, defaults.fileType) > -1){
// 类型符合，可以上传
if (file.size >= defaults.fileSize) {
alert(file.size);
alert('您这个"'+ file.name +'"文件大小过大');
} else {
// 在这里需要判断当前所有文件中
arrFiles.push(file);
}
}else{
alert('您这个"'+ file.name +'"上传类型不符合');
}
}else{
alert('您这个"'+ file.name +'"没有类型, 无法识别');
}
}
return arrFiles;
}
})
</script> </body>
</html>
jquery 上传图片转为base64，ajax提交到后台的更多相关文章
- Form表单利用Jquery Validate验证以及ajax提交
#表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...
- ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改.前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天 ...
- canvas图片base64编码后，ajax提交到后台
如题,直接上JS var imgData = canvas.toDataURL("image/png"); var data = imgData.substr(22); $.pos ...
- jquery 图片转为base64
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 原生ajax提交php后台接收不到问题
var xmlHttp; if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ...
- JQuery validate.js 在ajax提交form时如何触发
在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...
- 上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）
前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...
- 表单提交时上传图片 表单ajax提交
页面 <script type="text/javascript" src="js/jquery.form.js"></script>& ...
- 关于上传文件 非ajax提交 得到后台数据问题
<form name="configForm" id="configForm" method="post" action=" ...
随机推荐
- 小谈ConcurrentHashMap
面试的时候被面试官问了点相关知识,再次记录一些自己的总结 一. 1.HashTable也可实现线程安全,但是它是用synchronized实现的,所以其他线程访问HashTable的同步方法时,可能会 ...
- 《.NET 设计规范》第 8 章：使用规范
第 8 章:使用规范 8.1 数组 要在公共 API 中优先使用集合,避免使用数组. 不要使用只读的数组字段.虽然字段本身是只读的,用户不能修改它们,但用户可以修改数组中的元素. 考虑使用不规则数组, ...
- [DeeplearningAI笔记]改善深层神经网络1.1_1.3深度学习使用层面_偏差/方差/欠拟合/过拟合/训练集/验证集/测试集
觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.1 训练/开发/测试集 对于一个数据集而言,可以将一个数据集分为三个部分,一部分作为训练集,一部分作为简单交叉验证集(dev)有时候也成为验 ...
- python 之进程篇
多线程给我们的感觉 1.因为GIL的存在,一个进程的多线程同一时刻只能进去一个,感觉是假的并发 2.只适合I/O密集型的任务 3.针对计算密集型,就挂了(变成串行了) 在python中想要充分利用多核 ...
- 突然觉得前端js挺不错的
由于工作的需要,现在对前端技术有一定的要求,但是发现普遍前端技术都比较弱,遇到问题基本上没有人能帮助你解决,只好自己学习了. 从事java开发已经好久了,真的是好久了,但是水平一直还是一般吧. 从今天 ...
- React ref回调函数例子
ref属性也可以是一个回调函数而不是一个名字. 这个函数将要在组件被挂载之后立即执行. 这个参照的组件将会作为该函数的参数,这个函数可以立即使用这个组件参数,当然也可以将其保存供以后使用. 当这个 ...
- Does Java pass by reference or pass by value?(Java是值传递还是引用传递) - 总结
这个话题一直是Java程序员的一个热议话题,争论不断,但是不论是你百度搜也好还是去看官方的文档中所标明的也好,得到的都只有一个结论:Java只有值传递. 在这里就不贴代码细致解释了,让我们来看看一些论 ...
- Python中append和extend的区别
编者注:本文主要参考了<Python核心编程(第二版)> 网上有很多对这两个函数的区别讲解,但我觉得都讲的不是很清楚,记忆不深刻.这样解释清楚且容易记住. list.append(obje ...
- 让js调试更简单—console
一.显示信息的命令 console.log 用于输出普通信息 console.info 用于输出提示性信息 console.error用于输出错误信息 console.warn用于输出警示信息 最常用 ...
- 【Tools】linux更改分辨率,解决虚拟机安装后太小的问题
Linux更改屏幕分辨率 1,分辨率模式已存在 1)如何查询是否存在: 终端输入命令:xrandr,即会输出当前已存在的分辨率模式. 2)如何配置: 使用命令xrandr --output 显示器名称 ...