自动显示预览图并上传多张图到服务器

在网页上显示多个图片预览，并利用AJAX方式，向服务器提交多张图片。

由于预览是在客户端进行的，因此在提交之前，是没有流量的，不会浪费资源。

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>上报问题</title>
<style type="text/css">

select{
	border: 1px #bdbceb solid;
	width: 250px;
	height: 30px;
	line-height: 25px;
	/*防止紧紧靠在边上*/
	text-indent: 2px;
	border-radius: 5px;
	outline: 0;
	color: #000000;
	padding-right: 10px;
}

.float{
	float:left;
	width : 110px;
	height: 80px;
	overflow: hidden;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	padding: 0px;
	margin: 5px;
}
img{
	position: relative;
}
.result{
	width: 90px;
	height: 70px;
	text-align: center;
	box-sizing: border-box;
}

#file_input{
	display: none;
}

.delete{
	width: 90px;
	height:70px;
	position: absolute;
	text-align: center;
	line-height: 96px;
	z-index: 10;
	font-size: 30px;
	background-color: rgba(255,255,255,0.8);
	color: #777;
	opacity: 0;
	transition-duration: 0.7s;
	-webkit-transition-duration: 0.7s;
}

.delete:hover{
	cursor: pointer;
	opacity: 1;
}

.submit {
	margin-top:5px;
	margin-right:10px;
	display: inline-block;
	width: 100px;
	height:35px;
	line-height:30px;
	text-align:center;
	background: #F60;
	color: #FFF;
	border:none;
}

</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    var input = document.getElementById("file_input");
    var result;
    var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
    var fd;  //FormData方式发送请求
    var oSelect = document.getElementById("select");
    var oAdd = document.getElementById("add");
    var oSubmit = document.getElementById("submit");
    var oInput = document.getElementById("file_input");

    if(typeof FileReader==='undefined'){
        alert("抱歉，你的浏览器不支持 FileReader");
        input.setAttribute('disabled','disabled');
    }else{
        input.addEventListener('change',readFile,false);
    }　　　　　//handler

    function readFile(){
        fd = new FormData();
        var iLen = this.files.length;
        for(var i=0;i<iLen;i++){
            if (!input['value'].match(/.jpg|.jpeg/i)){　　//判断上传文件格式
                return alert("上传的图片格式不正确，请重新选择");
            }
            var reader = new FileReader();
            fd.append(i,this.files[i]);
            reader.readAsDataURL(this.files[i]);  //转成base64
            reader.fileName = this.files[i].name;

            reader.onload = function(e){
                var imgMsg = {
                    name : this.fileName,//获取文件名
                    base64 : this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
				}
                dataArr.push(imgMsg);
                result = '<div class="delete">delete</div><div class="result"><img class="subPic" src="'+this.result+'" alt="'+this.fileName+'"/></div>';
                var div = document.createElement('div');
                div.innerHTML = result;
                div['className'] = 'float';
                document.getElementsByTagName('body')[0].appendChild(div);  　　//插入dom树
                var img = div.getElementsByTagName('img')[0];
                img.onload = function(){
                    var nowHeight = ReSizePic(this); //设置图片大小
                    this.parentNode.style.display = 'block';
                    var oParent = this.parentNode;
                    if(nowHeight){
                        oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';
                    }
                }
                div.onclick = function(){
                    $(this).remove();                  // 在页面中删除该图片元素
                }
            }
        }
    }

    function send(){
        var submitArr = [];
		$("#loading").html("<img src='/static/ops/img/loading.gif'/>"); 
        $('.subPic').each(function () {
                submitArr.push({
			name: $(this).attr('alt'),
			base64: $(this).attr('src'),
			range: document.getElementById("range").value,
			notes: document.getElementById("notes").value
                });
            }
        );
        $.ajax({
            url : 'upload',    // 上传地址，可修改
            type : 'post',
            data : JSON.stringify(submitArr),
            dataType: 'json',
            //processData: false,   用FormData传fd时需有这两项
            //contentType: false,
            success : function(data){
				$("#loading").empty(); 
				if (data.result == 'OK') {
					alert(data.msg);
					window.location.href = "list";   // 成功上传后的跳转，响应处理即可
				}
          　},
            error : function(data){
				$("#loading").empty(); 
                alert("提交失败");
          　}
        })
    }

    oSelect.onclick=function(){
        oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
        //清空已选图片
        $('.float').remove();
        oInput.click();
    }

    /*
    oAdd.onclick=function(){
        oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
        oInput.click();
    }
    */

    oSubmit.onclick=function(){
        if(!dataArr.length){
            return alert('请先选择文件');
		}
        send();
    }
}
/*
 用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，
 不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，
 也就是非法调用，所以要加上“processData: false,contentType: false,”
 * */
function ReSizePic(ThisPic) {
    var RePicWidth = 200; //这里修改为您想显示的宽度值

    var TrueWidth = ThisPic.width; //图片实际宽度
    var TrueHeight = ThisPic.height; //图片实际高度

    if(TrueWidth>TrueHeight){
        //宽大于高
        var reWidth = RePicWidth;
        ThisPic.width = reWidth;
        //垂直居中
        var nowHeight = TrueHeight * (reWidth/TrueWidth);
        return nowHeight;  //将图片修改后的高度返回，供垂直居中用
    }else{
        //宽小于高
        var reHeight = RePicWidth;
        ThisPic.height = reHeight;
    }
}
</script>
</head>
    <body>
			<div id="loading" style="position:absolute; top:50%;left:50%;z-index:99"></div>
            <div class="container">
				<label>选择或输入:</label>
					<select id="ranges" onchange="document.getElementById('range').value=this.value">
						<option value="">请选择</option>
						<volist name="data" id="vo"><option value="{$vo.name}">{$vo.name}</option></volist>  // volist是ThinkPHP的后台处理，纯网页可以更改掉
					</select>
					<input id="range" style="width:216px;height:20px;margin-left:-253px;margin-top:5px;border:none"/>
				<div style="width:100%;height:5px"></div>
				<label>内容（限255字符）:</label>
				<textarea style="width:98.5%;height:150px;overflow:auto;word-break: break-all;border:solid 1px #bdbceb; border-radius:5px" maxlength="255" placeholder="Blablabla……" id="notes"></textarea>
                <!-- <button id="add">(-追加)图片</button> -->
                <input type="file" id="file_input" multiple accept=".jpg,.jpeg" /> <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->
                <br/><button id="select" class="submit">附加图片</button>
                <button id="submit" class="submit">提交</button>
				<button type="button" class="submit" onclick="window.history.back(-2);">返回</button>
				<div style="height:5px"></div><div>可一次性选择多张图片，点击图片可删除</div>
            </div>
    </body>
</html>

ThinkPHP中处理AJAX上传的多张图片的代码，在Controller中写代码：

	public function upload() 
	{
		$jsondata = json_decode(file_get_contents('php://input'));
		$dir = config("upload_dir").date("Y/m/d/");
		if(!file_exists($dir)) mkdir($dir, 0777, true);

		$file = $jsondata[0];
		$data['user']=session('user');
		$data['notes']=$file->notes;
		$data['range']=$file->range;
		$id = Db::connect('db_config')->name('table_name1')->insertGetId($data);

		foreach ( $jsondata as $file) {
			$localfile = ROOT_PATH."public/".$dir.$file->name;
			$thumblocalfile = ROOT_PATH."public/".$dir."s_".$file->name;
			$weburl = config("webserver").$dir.$file->name;
			$thumbweburl = config("webserver").$dir."s_".$file->name;
			$s = str_replace("data:image/jpeg;base64,", '', $file->base64);
			$s = base64_decode($s);
			file_put_contents($localfile, $s);
			$this->CreateThumb($localfile, $thumblocalfile);
			$data2['ops_id'] = $id;
			$data2['ops_pic_url'] = $weburl;
			$data2['ops_pic_file'] = "public/".$dir.$file->name;
			$data2['ops_pic_thumb'] = $thumbweburl;
			Db::connect('db_config')->name('table_name2')->insert($data2);
		}
		echo '{"result": "OK", "msg": "保存成功"}';
	}