本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在項目中經常會用到js上傳圖片本地預覽的效果，同時需要在預覽圖上直接預覽截圖的范圍。
下面是我寫的簡單的demo，是用js結合cropper.js模擬實現此項前端的功能，后臺則不考慮。
準備：引入文件：
插件地址：
https://fengyuanchen.github.io/cropperjs/
效果如下：
一、實現js上傳圖片本地預覽的功能。html:
?
javascript:
/*?從?file?域獲取?本地圖片?url?*/
function?getFileUrl(sourceId)?{
var?url;
if?(navigator.userAgent.indexOf("MSIE")>=1)?{?//?IE
url?=?document.getElementById(sourceId).value;
}?else?if(navigator.userAgent.indexOf("Firefox")>0)?{?//?Firefox
url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}?else?if(navigator.userAgent.indexOf("Chrome")>0)?{?//?Chrome
url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return?url;
}
/*?將本地圖片?顯示到瀏覽器上?*/
function?preImg(sourceId,?targetId)?{
var?url?=?getFileUrl(sourceId);
var?imgPre?=?document.getElementById(targetId);
imgPre.src?=?url;
}
上面的方法，可以實現上傳圖片本地預覽的功能。下面我們再來看如何結合cropper.js實現預覽截圖的功能。
二、結合cropper.js實現預覽截圖的功能。html:
?
開始裁剪
裁剪
????
javascript:
/*?從?file?域獲取?本地圖片?url?*/
function?getFileUrl(sourceId)?{
var?url;
if?(navigator.userAgent.indexOf("MSIE")>=1)?{?//?IE
url?=?document.getElementById(sourceId).value;
}?else?if(navigator.userAgent.indexOf("Firefox")>0)?{?//?Firefox
url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}?else?if(navigator.userAgent.indexOf("Chrome")>0)?{?//?Chrome
url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return?url;
}
/*?將本地圖片?顯示到瀏覽器上?*/
function?preImg(sourceId,?targetId)?{
var?url?=?getFileUrl(sourceId);
var?imgPre?=?document.getElementById(targetId);
imgPre.src?=?url;
var?imgCrop?=?document.getElementById('cropTestImg');
imgCrop.src=?url;
}
/*?點擊裁剪圖片?*/
$("#cropBeginBtn").on('click',?function(event)?{
var?$image?=?$('#cropTestImg');
$image.cropper({
movable:?false,
zoomable:?false,
rotatable:?false,
scalable:?false,
autoCropArea:0.5,
minCropBoxWidth:100,
minCropBoxHeight:100
});
/*?點擊獲取圖片的裁剪大小?*/
$('#cropEndBtn').on('click',function(){
var?filenames?=?document.getElementById('cropTestImg').src;
var?imageData?=?$image.cropper('getData');
console.log(imageData);
alert(imageData.x+imageData.y+imageData.width+imageData.height);
return?false;
});
});
上面的方法，可以很好的解決js上傳圖片本地預覽同時支持預覽截圖的功能的方法。
總結
以上是生活随笔為你收集整理的本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php catch e是什么,php t
- 下一篇： php如何删除单个数组,如何在php中使