php图片预览怎么做,记录 ：html 图片预览 php图片上传

图片预览

html:

图片上传预览

function imgPreview(fileDom){

//判断是否支持FileReader

if (window.FileReader) {

var reader = new FileReader();

} else {

alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");

}

//获取文件

var file = fileDom.files[0];

var imageType = /^image\//;

//是否是图片

if (!imageType.test(file.type)) {

alert("请选择图片！");

return;

}

//读取完成

reader.onload = function(e) {

//获取图片dom

var img = document.getElementById("preview");

//图片路径设置为读取的图片

img.src = e.target.result;

};

reader.readAsDataURL(file);

}

图片上传：

php:$uploadPath = 'uploads/';

// 获取提交的图片数据

$file = $_FILES['file'];

// 获取图片回调路径

//$callbackUrl = $_POST['callbackUrl'];

if($file['error'] > 0)

{

echo "";

exit();

}

else

{

// chmod($uploadPath, 0666);

if(file_exists($uploadPath.$file['name'])){

$msg = $file['name'] . "文件已经存在！";

$pic = "http://localhost/".$uploadPath.$file['name']; //https://servicenetwork

}

else

{

if(move_uploaded_file($file['tmp_name'], $uploadPath.$file['name']))

{

$img_url = "http://localhost/".$uploadPath.$file['name'];

//$img_url = urlencode($img_url);

$pic = $img_url;

//$url = $callbackUrl."?img_url={$img_url}";

// 跳转

//header("location:{$url}");

//exit();

}

else

{

echo "";

exit();

}

}}或者js:function upload() {

var xhr = new XMLHttpRequest();

var progress = document.getElementById("progress")

progress.style.display = "block";

xhr.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total);

progress.value = percentage;

}

}, false);

xhr.upload.addEventListener("load", function(e){

console.log("上传完毕...")

}, false);

xhr.open("POST", "upload");

xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText); // handle response.

progress.style.display = "none";

progress.value = 0;

}

};

var file = document.getElementById("imgFile");

var fd = new FormData();

fd.append(file.files[0].name, file.files[0]);

xhr.send(fd);

}