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=" ...

随机推荐

Linux中的shell到底是什么
(引自:https://zhidao.baidu.com/question/557066905.html) [一] shell的含义: 首先shell的英文含义是"壳": 它是相对 ...
Redis的部署
笔者Q:972581034 交流群:605799367 欢迎加群交流官方网站 redis.io 下载 cd /usr/local/src wget http://download.redis.io/ ...
SQL查询系列1---
1.查询关系为夫妻,年龄相加大于60的信息表1 信息表 info id 编号 sex 性别 0-女,1-男 age 年龄表2 关系表 rel id1 编号1 外键 id2 编号2 外键 r ...
Hello 2018
愈发觉得写技术博客对于自己写作能力的提升会很有帮助,于是在今天终于用Github+Jekyll的方式搭建了自己的博客,从今往后就在这里记录自己在技术上成长的点滴,希望自己的总结和思考也能帮助到其他人. ...
完全总结bash中的条件判断test [ [[ 使用
在bash脚本编程中,我们经常做一些条件判断, 我们主要用到了三种,test,单中括号,双中括号经常有看到不同的写法,如: [ $? –eq ] [[ $myvar == “mysql” ]] te ...
JMeter生成HTML性能报告
有时候我们写性能报告的时候需要一些性能分布图,JMeter是可以生成HTML性能报告的一.准备工作 1:jmeter3.0版本之后开始支持动态生成测试报表 2:jdk版本1.7以上 3:需要jmx脚 ...
bzoj 4813: [Cqoi2017]小Q的棋盘 [树形背包dp]
4813: [Cqoi2017]小Q的棋盘题意: 某poj弱化版?树形背包据说还可以贪心... #include <iostream> #include <cstdio> ...
四、正则表达式re模块
什么是正则表达式正则表达式,又称规则表达式,通常被用来检索.替换那些符合某个模式(规则)的文本. 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一 ...
UbuntuNFS服务器配置
NFS服务的配置====================1,下载并安装NFS sudo apt-get install nfs-kernel-server 2,配置NFS sudo vi /etc/e ...
Angular20 nginx安装，angular项目部署
1 nginx安装(Windows版本) 1.1 下载安装包到官网下载Windows版本的nginx安装包技巧01:下载好的压缩包解压即可,无需安装 1.2 启动nginx 进入到解压目录,点击 ...

jquery 上传图片转为base64，ajax提交到后台

jquery 上传图片转为base64，ajax提交到后台的更多相关文章

随机推荐

热门专题