<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/upload/jquery.fileupload.js"></script>
<script src="js/upload/preview.js"></script>
</head>
<body style="background:#000; color:#FFF">
<div>
<input hidden="hidden" id="fileId" type="file" name="imgFile" accept="image/*" />
<div id="progress" class="overlay"/></div>
</div>
<div id="picId" title="点击选择图片" onclick="$('#fileId').click();">
<img src="addimg.jpg">
</div>
<button type="button" onclick="uploadImage()">确定</button>
<script type="text/javascript">
//图片压缩
$('#fileId').fileupload({
dropZone:null,
pasteZone:null,
add: function (e, data) {
if($.support.localPreview){
var file = data.files[0];
$(this).previewImg({
uploadFile: file,
uploadData: data,
divName:'picId',
fileName:'picId',
width: 118,
height: 40,
quality: 90,
});
}else{
if (e.isDefaultPrevented()) {
return false;
}
}
},
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
function uploadImage() {
alert($("#bigPreviewImgpicId").attr("src"));
var img = $("#bigPreviewImgpicId").attr("src");
$.ajax({
type : "POST",
url : "footerConfig.action?action=saveImg",
data : {
base64Data : img
},
cache : false,
success : function(data) {
alert("上传成功");
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败，请检查网络后重试");
}
});
}
</script>
</body>
</html>
H5 压缩图片上传(pc端适用)支持png/jpg格式
5星 · 超过95%的资源 需积分: 50 173 浏览量
2016-05-25
13:12:19
上传
评论
收藏 110KB ZIP 举报 
h5_img.zip （15个子文件） 
h5_img WebContent META-INF 
MANIFEST.MF 39B WEB-INF lib 
test.html 2KB js jquery.js 94KB upload jquery.fileupload.js 60KB preview.js 3KB jquery-ui.js 223KB
addimg.jpg 2KB .settings org.eclipse.wst.jsdt.ui.superType.name 6B org.eclipse.wst.common.project.facet.core.xml 345B org.eclipse.wst.common.component 515B org.eclipse.wst.jsdt.ui.superType.container 49B .jsdtscope 567B org.eclipse.jdt.core.prefs 364B src .project 1KB .classpath 841B build classes 
- 1
- 2
前往页