圖片上傳格式通常是文件格式和base64格式,比較方便的是圖片格式,後臺能夠方便的處理上傳的圖片。javascript
查看效果php
<link rel="stylesheet" href="../dist/cropper.css"> <script src="../dist/cropper.js"></script>
<div class="content-wrap"> <h4 class="uploadPicTitle">上傳頭像</h4> <div class="box"> <div class="preview-wrap"> <div class="title">裁切預覽</div> <div class="preview-img-wrap"> <img src="" alt="" id="imga" class="preview-img-big" /> </div> <div>150 * 150</div> </div> <div class="img-wrap"> <img src="../dist/imgs/online-people1.png" alt="" id="img" /> </div> </div> <div class="btn-wrap"> <input type="file" id="file" style="position:absolute;clip:rect(0,0,0,0)" /> <label for="file" class="btn btn-primary" style="margin-right:20px;">選擇圖片</label> <button class="btn btn-success">上傳圖片</button> </div> </div>
<style> .uploadPicTitle{line-height:35px;border-bottom:1px solid #ccc;font-weight:bold;} .content-wrap{width:1000px;} .box{height:400px;margin-bottom:20px;} .img-wrap{margin-right:300px;height:100%;background:#f6f6f6;text-align:center;position:relative;} #img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;} .preview-wrap{width:280px;float:right;height:100%;background:#f6f6f6;text-align:center;} .preview-wrap .title{font-weight:bold;height:35px;line-height:35px;padding:0 10px;text-align:center;margin-top:15px;} .preview-img-wrap{width:150px;height:150px;border:1px solid #ccc;margin:0 auto;margin-bottom:15px;margin-top:15px;} .preview-img-big{width:100%;} </style>
<script> var image = document.getElementById('img'); var cropper, canvas; $('#file').change(function(e) { if (cropper) { cropper.destroy(); } var file; var files = e.target.files; if (files && files.length > 0) { file = URL.createObjectURL(files[0]); $('#img').attr({ 'src': file }) } cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, background: false, //是否顯示網格背景 zoomable: false, //是否容許放大圖像 guides: false, //是否顯示裁剪框虛線 crop: function(event) { //剪裁框發生變化執行的函數。 canvas = cropper.getCroppedCanvas({ //使用canvas繪製一個寬和高200的圖片 width: 200, height: 200, }); $('#imga').attr("src", canvas.toDataURL("image/png", 0.3)) //使用canvas toDataURL方法把圖片轉換爲base64格式 } }); }) $('button').click(function() { var file = dataURLtoBlob($('#imga').attr("src")); //將base64格式圖片轉換爲文件形式 var formData = new FormData(); var newImg = new Date().getTime() + '.png'; //給圖片添加文件名 若是沒有文件名會報錯 formData.append('file', file, newImg) //formData對象添加文件 $.ajax({ type: "POST", //url: url + "/res/upload", url: "upload.php", data: formData, processData: false, // 不處理數據 contentType: false, // 不設置內容類型 success: function(data) { //console.log(data) alert("上傳成功") //var data = JSON.parse(data); 若是後臺傳過來是Json格式的文件 不須要再次轉換,轉換的話會報錯 var data = data; } }) }) // 將base64格式圖片轉換爲文件形式 // data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAA // atob 是ASCII 轉換成 binary(二進制)btoa是二進制轉換成ASCII // Uint8Array 8位無符號整數類型 // Blob是類文件對象 function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } //[u8arr] [] 不能省略 return new Blob([u8arr], { type: mime }); } </script>
<?php // 容許上傳的圖片後綴 header("Content-type: text/html; charset=utf-8"); $allowedExts = array("gif", "jpeg", "jpg", "png", "pdf", "txt"); $temp = explode(".", $_FILES["file"]["name"]); //獲取文件對象,鍵名爲name屬性或者key //Array ( [file] => Array ( [name] => 居中.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\php8C86.tmp [error] => 0 [size] => 9742 ) ) print_r($_FILES); print($_FILES["file"]["name"]); echo '<br>'; print($_FILES["file"]["type"]);//application/pdf echo '<br>'; $extension = end($temp); // 獲取文件後綴名 print($extension); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "application/pdf") || ($_FILES["file"]["type"] == "text/plain") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) //&& ($_FILES["file"]["size"] < 204800) // 小於 200 kb && in_array($extension, $allowedExts)) { if ($_FILES["file"]["error"] > 0) { echo "錯誤:: " . $_FILES["file"]["error"] . "<br>"; } else { echo "上傳文件名: " . $_FILES["file"]["name"] . "<br>"; echo "文件類型: " . $_FILES["file"]["type"] . "<br>"; echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "文件臨時存儲的位置: " . $_FILES["file"]["tmp_name"] . "<br>"; // 判斷當期目錄下的 upload 目錄是否存在該文件 // 若是沒有 upload 目錄,你須要建立它,upload 目錄權限爲 777 if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " 文件已經存在。 "; } else { // 若是 upload 目錄不存在該文件則將文件上傳到 upload 目錄下 $name=iconv("UTF-8", "gbk",$_FILES["file"]["name"]); //move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . "lily".".".$extension); move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" .$name); echo "文件存儲在: " . "upload/" . $_FILES["file"]["name"]; } } } else { echo "非法的文件格式"; } //在使用move_uploaded_file時,路徑upload/,必定要先創建upload的文件夾,不然出錯 ?>