node服務(wù)端上傳:http://www.reibang.com/p/1e92a86c571a
拖拽,預覽,上傳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#drop {
border: 1px solid gray;
height: 100px;
}
img {
height: 100px;
}
</style>
</head>
<body>
<div id='drop'>
<input type="file" name="file" id="upload-file">
</div>
<div id="destination"></div>
<script>
var drop = document.getElementById('drop');
var upload_file = document.getElementById('upload-file');
var destination = document.getElementById('destination');
// 進入元素觸發(fā)
drop.addEventListener("dragenter", function (e) {
e.preventDefault();
console.log('進入', e);
})
// 離開元素觸發(fā)
drop.addEventListener("dragleave", function (e) {
e.preventDefault();
console.log('離開', e);
})
// 元素上移動觸發(fā)
drop.addEventListener("dragover", function (e) {
e.preventDefault();
})
// 放置圖片在元素上觸發(fā)
drop.addEventListener("drop", function (event) {
var e = event || window.event;
e.preventDefault();//阻止默認事件,這是必須的,
var files = e.dataTransfer.files;
console.log(files);
fileFn(files);
})
// input選擇圖片觸發(fā)
upload_file.addEventListener('change', function () {
console.log(this.files);
fileFn(this.files);
});
var isempty = false;//是否清空已選擇文件
var fileArr = [];//存儲選中的文件數(shù)據(jù)
function fileFn(f) {
if (isempty) {
fileArr = [];
}
for (var i = 0; i < f.length; i++) {
fileArr.push(f[i]);
}
destination.innerHTML = '';
for (var x = 0, xlen = fileArr.length; x < xlen; x++) {
file = fileArr[x];
if (file.type.indexOf('image') != -1) {
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
destination.appendChild(img);
};
reader.readAsDataURL(file);//讀取文件
}
}
upload();
}
function upload() {
xhr = new XMLHttpRequest();
xhr.open("post", "http://b.adtk.cn/file.php", true);
// xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onload=function(data){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
}
};
var fd = new FormData();
fd.append('file', fileArr[0]);
xhr.send(fd);
}
</script>
</body>
</html>
php文件上傳
<?php
header('Access-Control-Allow-Origin:*');
/*
{
"name":"1.png",//原名稱。
"type":"image\/png",//文件的 MIME 類型
"tmp_name":"C:\\Users\\h\\AppData\\Local\\Temp\\phpEAC5.tmp",//臨時文件名
"error":0,//錯誤代碼,0成功,1大小超過php.ini限制,2-超過HTML 表單中 MAX_FILE_SIZE 選項指定的值,3; 文件只有部分被上傳输玷。 4; 沒有文件被上傳肺然。5; 上傳文件大小為0.
"size":160330//已上傳文件的大小
}
*/
// 檢查文件是否已存在
if (file_exists("upload/" . $_FILES["file"]["name"])){
echo $_FILES["file"]["name"] . "已存在";
}else{
// 將零時文件保存
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
echo json_encode($_FILES['file']);
}
?>
預覽兼容性方案(網(wǎng)上搜的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js圖片上傳預覽</title>
<script>
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("對不起瓤的，系統(tǒng)僅支持標準格式的照片术陶，請您調(diào)整格式后重新上傳，謝謝 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用濾鏡效果
}
else//FF
{
path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
//path = imgFile.files[0].getAsDataURL();// FF 3.0
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
//document.getElementById("img1").src = path;
}
}
}
</script>
</head>
<body>
<input type="file" onchange='PreviewImage(this)' />
<br />
<div id="imgPreview" style='width:120px; height:100px;'>
<img id="img1" src="" width="120" height="100" />
</div>
</body>
</html>
