jquery图片上传截取

1. jquery怎么打开本地图片预览，点击确定后上传

1, tapmodo / Jcrop
Jcrop是人气最高的图片裁剪jQuery插件，stars数量2k+，功能非常丰富，文档齐全，首选。Github.com官网也使用了这个插件。有一个小细节是，边框线的蚂蚁线是动画的，真的很用心。

2, fengyuanchen / cropper
Cropper也是一款图片裁剪jQuery插件，stars数量1k+，是杭州的前端工程师Fengyuan Chen所写的，功能也相当丰富，裁剪时还可以对原图进行旋转。

3, imgAreaSelect 也是比较经典的图片裁剪jQuery插件，我很久以前就在自己的项目中使用过，stars数量500+。

http://blog.csdn.net/cuixiping/article/details/45966177

2. jquery如何将页面生成的图片上传到服务器

File Upload组件啊，是同步还是异步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;* 其他参数同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '选择文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>

3. jquery如何获取input(file)控件上传的图片名称，即"11111.jpg"

$('input').on('change',function(){

var value = $(this).val();

value = value.split("\")[2];

})

value 就是图片名称。因为浏览器安全机制 获取到的value都是C:fakepath 加上图片名，所以可以用这个方式获取

4. jquery如何完成上传图片的剪切

用canvas画出图片剪裁区域，然后导出

5. jquery多图片上传(form表单序列化提交)为啥后台只获取一个图片文件

首先，文本类的可以放在request中通过request.getAttribute(name)获取。图片你在前端放地址，后端也是像前面通过request.getAttribute(name)获取后存入数据库。这是jsp+servlet的做法。jsp有九大内置对象用于传递数据。而你如果用spring+springmvc的话是通过参数绑定来传递数据的。详细的你可以了解框架文档。建议你选择一种框架可以便捷开发。jsp+servlet是比较原始的处理方式。

6. jquery photoclip 怎么提交

jquery截取图片后，ajax异步提交该图片

如何用form异步提交已经截取的图片呢？因为后台(springMVC)用到组件上传图片，需要图片类型list。

解决思路：截取图片是base64，将base64存入form的input，type=file中，提交form即可。

[html] view plain
<script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" ></script>
<script src="assets/wap/kuaiqin/js/iscroll-zoom.js"></script>
<script src="assets/wap/kuaiqin/js/hammer.js"></script>
<script src="assets/wap/kuaiqin/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"></script>

[html] view plain
<img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;">
[html] view plain
<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>

[html] view plain
<!-- 图片处理 -->
<div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"></div>
<div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;">
<div id="clipArea" style="margin:20px;height: 300px;"></div>
</div>
<button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;">确定</button>
<!-- end -->

[html] view plain
$("#xiaotu").click(function(){//点击图片弹出文件夹
$("#face_upload").click();
});

[html] view plain
$("#face_upload,#smrz_upload").change(function(){//选择图片之后，将图片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl){
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();
}
})

[html] view plain
function getObjectURL(file){//获取选择图片的base64
var url=null
if(window.createObjectURL!=undefined){ // basic
url=window.createObjectURL(file)
}else if(window.URL!=undefined){ // mozilla(firefox)
url=window.URL.createObjectURL(file)
} else if(window.webkitURL!=undefined){ // webkit or chrome
url=window.webkitURL.createObjectURL(file)
}
return url
}

[html] view plain
var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL) {
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;
}
});
$("#clipBtn").click(function(){
convertToFile(base64);
});

[html] view plain
function convertToFile(base64Codes){//将base64转化blob，并放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name属性，与后台的对应即可
$.ajax({//提交表单，异步上传图片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data){
imgurl=data.imgs[0];
subuserinfo_face(imgurl);
}
});
}
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}

7. jsp页面实现图片预览，截取和上传

比较常用，而且简单易用的jquery-uploadify插件，支持带进度的多线程上传

用到的是flash的跨域上传模型，这里不用深究

基本文件大致包括

jquery-x.x.x.js

jquery.uploadify.x.js

uploadify.swf

uploadify.css

使用方式：

	$(function(){
		$("#fileId").uploadify({
			width:42,
			height:32,
			swf:'js/uploadify.swf',
			uploader:'upload.do;jsessionid=<%=session.getId()%>',
			buttonImage:'image/movetophone_white.png',
			fileSizeLimit:2048,
			fileObjName:"imgFile",
			method:'post',
			removeCompleted:true,
			fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
			onSelectError:function(file,errorCode,errorMsg){
				alert("文件过大");
			},
			onUploadStart:function(file){
				
			},
			onUploadSuccess:function(file,data,response){
				alert("上传完成");
			},
			onUploadError:function(file,errorCode,errorMsg){
				alert(errorMsg);
			}
		});
	});
	<inputtype="file"id="fileId"/>

另，工程中需要引入commons-fileupload的包。

8. 急求 jquery 文件上传，带图片裁剪功能

给你一个jquery 的插件 ，Jcrop
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop

9. jquery ajax实现jsp页面图片上传与后台获取。

你在上传图片的地方写个方法upload(url)，在js中用ajax来传值（url）到后台，后台获取到图片上传的url就行了啊