【发布时间】：2015-10-23 14:05:50
【问题描述】：
我正在尝试将图像上传到临时文件夹进行编辑（裁剪） 图像并使用选定的创建头像，但不起作用。
按钮加载应为图像充电，加载后应显示在： 但事实并非如此。我做错了。
注意：如果图像是静态的，那么它是否有效。但我需要使用按钮上传以进行动态化。
从那里，我打算使用裁剪器生成图像选择的预览。 查看选择的结果结束
在我获得裁剪器意图的值后，创建一个新的 json 格式，以发送数据并将其保存在数据库中。
但我不明白！有人可以指导我！。
我没有使用过这些技术， 就是这样，我不明白如何上传。并将路径和图像裁剪保存在数据库中！
注意：图片裁剪后，会保存在文件夹中，原图不保存，只需要裁剪！
感谢您的建议！
这是插件：https://github.com/fengyuanchen/cropper
比 pediar 更好地帮助有这些技术经验的人， 谢谢你的帮助！。
这是我的代码！ ------ 也许我的代码很糟糕，所以我需要，指导我，或告诉我，如何做或应该做。谢谢 ----------
开始代码！
<!DOCTYPE html>
<html>
<head>
<title>TEST DEMO UPLOAD</title>
<script src="jquery/jquery-2.1.4.min.js"></script><!-- jQuery is required -->
<link href="css/cropper.min.css" rel="stylesheet">
<link href="css/cropper.css" rel="stylesheet">
<link href="css/cropper.css" rel="stylesheet">
<script src="javascript/cropper.min.js"></script>
<style>
.img-container img {
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<div class="columns">
<div class="img-container">
<img id="My_Image" alt="Picture Uploaded, To Crop" class="cropper" src="#">
</div>
<div class="columns">
<div class="previews ">
<div class="img-preview preview-lg">
</div>
</div>
</div>
the cropper JQuery info: https://github.com/fengyuanchen/cropper
<p>Example Upload and Crop with Cropper JQuery Plugins And Previews </p>
<form id="form" action="Demomode.php" method="post" enctype="multipart/form-data">
<lobel>Select image a Upload:</lobel>
<input type="file" id="Upload" name="Up" >
<input type="submit" value="Upload Image" name="submit">
</form>
<div>
<label id="image-data"></label>
</div>
<body>
</html>
<script>
// make references to file to charge in temp folder for edit with cropper
$('#Upload').click(function (){
var cp = $('#My_Image > img').cropper({
preview: ".img-preview", // A jQuery selector string, add extra elements to show preview.
aspectRatio:4/4,
strict:true,
background:false,
guides:false,
autoCropArea:0.6,
rotatable:false,
crop: function(data){
//create the preview of image original
$('.img-preview').cropper({
preview: ".img-preview",
aspectRatio:1/1,
strict:true,
});
//get data of part crop and send in format json for send to database
if(data.height < 100 || data.width < 100){
}else{
var json = [
'{"x":' + data.x,
'"y":' + data.y,
'"height":' + data.height,
'"width":' + data.width + '}'
].join();
$().val(json);
}
// Send data of the image crop for save in database
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:json,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}
});
</script>
【问题讨论】：
标签： javascript jquery ajax upload crop