Rumah > Artikel > hujung hadapan web > jQuery plug-in jcrop Fileapi dengan sempurna merealisasikan muat naik imej, memangkas dan pratonton perkongsian kod_jquery
jQuery plug-in jcrop Fileapi dengan sempurna merealisasikan muat naik imej, memangkas dan pratonton perkongsian kod_jquery
- WBOYasal
- 2016-05-16 16:02:401676semak imbas
Pangkas imej pada halaman web tanpa melalui pelayan.
Ini dilaksanakan menggunakan rangka kerja https://github.com/mailru/FileAPI. Bekerjasama dengan jcrop.
Pelayar lanjutan menggunakan kanvas untuk memangkas, dan ie6 7 dan 8 menggunakan denyar.
Kod teras:
var el = $('input').get(0);
seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){
FileAPI.event.on(el, 'change', function (evt){
var files = FileAPI.getFiles(evt); // Retrieve file list
FileAPI.filterFiles(files, function (file, info){
if( !/^image/.test(file.type) ){
alert('图片格式不正确');
return false;
}
else if(file.size > 20 * FileAPI.MB){
alert('图片必须小于20M');
return false;
}
else{
return true;
}
}, function (files, rejected){
console.log(files);
if( files.length ){
var file = files[0];
var img0 = FileAPI.Image(file);
var img1 = FileAPI.Image(file);
var ratio = 0;
FileAPI.getInfo(file, function (err, info) { //get image ratio
if (!err) {
if (info.width > info.height) {
ratio = info.width / 500;
}
else {
ratio = info.height / 500;
}
}
});
img0.resize(500, 500, 'max') //place image and register jcrop
.get(function(err, img) {
$('#img2').empty();
$('#img2').append($(img));
$('#img2').children().Jcrop({
aspectRatio: 1,
bgColor: 'rgba(0,0,0,0.4)',
onSelect: function(c) {
img1.matrix.sx = c.x * ratio;
img1.matrix.sy = c.y * ratio;
img1.matrix.sw = c.w * ratio;
img1.matrix.sh = c.h * ratio;
img1.matrix.dw = 500;
img1.matrix.dh = 500;
img1.get(function(err, img) {
// $('#img3').empty();
// $('#img3').append($(img));
$('#img3').html($(img));
});
}
});
});
$('#btn').on('click',function(){
FileAPI.upload({
// url: '/testUpFile/upFile',
// headers: { 'Content-Type': 'multipart/form-data' },
files: { images: img1 },
progress: function (evt){ /* ... */ },
complete: function (err, xhr){ /* ... */
//alert(xhr.responseText);
console.log(xhr);
}
});
});
}
});
});
});
Kod penuh:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="./jquery.min.js"></script>
<script src="./jcrop/jquery.Jcrop.min.js"></script>
<link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet">
</head>
<style>
.upload-btn {
width: 130px;
height: 25px;
overflow: hidden;
position: relative;
border: 3px solid #06c;
border-radius: 5px;
background: #0cf;
}
.upload-btn:hover {
background: #09f;
}
.upload-btn__txt {
z-index: 1;
position: relative;
color: #fff;
font-size: 18px;
font-family: "Helvetica Neue";
line-height: 24px;
text-align: center;
text-shadow: 0 1px 1px #000;
}
.upload-btn input {
top: -10px;
right: -40px;
z-index: 2;
position: absolute;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
font-size: 50px;
}
</style>
<body>
<div>
<!-- "js-fileapi-wrapper" -- required class -->
<div class="js-fileapi-wrapper upload-btn" id="choose">
<input name="files" type="file" multiple />
<button id="btn">上传</button>
</div>
<div id="images">
<p style="margin-top: 40px;"></p>
<div id="img2" ></div>
<div id="img3"></div>
</div>
</div>
<script>window.FileAPI = { staticPath: './fileapi/' };</script>
<script src="./fileapi/FileAPI.min.js"></script>
<script>
var el = $('input').get(0);
FileAPI.event.on(el, 'change', function (evt){
var files = FileAPI.getFiles(evt); // Retrieve file list
FileAPI.filterFiles(files, function (file, info){
if( !/^image/.test(file.type) ){
alert('图片格式不正确');
return false;
}
else if(file.size > 20 * FileAPI.MB){
alert('图片必须小于20M');
return false;
}
else{
return true;
}
}, function (files, rejected){
if( files.length ){
var file = files[0];
var img0 = FileAPI.Image(file);
var img1 = FileAPI.Image(file);
var ratio = 0;
FileAPI.getInfo(file, function (err, info) { //get image ratio
if (!err) {
if (info.width > info.height) {
ratio = info.width / 500;
}
else {
ratio = info.height / 500;
}
}
});
img0.resize(500, 500, 'max') //place image and register jcrop
.get(function(err, img) {
$('#img2').empty();
$('#img2').append($(img));
$('#img2').children().Jcrop({
aspectRatio: 1,
bgColor: 'rgba(0,0,0,0.4)',
onSelect: function(c) {
img1.matrix.sx = c.x * ratio;
img1.matrix.sy = c.y * ratio;
img1.matrix.sw = c.w * ratio;
img1.matrix.sh = c.h * ratio;
img1.matrix.dw = 500;
img1.matrix.dh = 500;
img1.get(function(err, img) {
// $('#img3').empty();
// $('#img3').append($(img));
$('#img3').html($(img));
});
}
});
});
$('#btn').on('click',function(){
FileAPI.upload({
url: '/testUpFile/upFile',
files: { images: img1 },
progress: function (evt){ /* ... */ },
complete: function (err, xhr){ /* ... */
//alert(xhr.responseText);
}
});
});
}
});
});
</script>
</body>
</html>
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：nodejs melaksanakan HTTPS untuk memulakan POST request_node.jsArtikel seterusnya：nodejs melaksanakan HTTPS untuk memulakan POST request_node.js
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional