本地上传图片的n种方法

最新推荐文章于 2021-07-23 17:01:41 发布

翻译最新推荐文章于 2021-07-23 17:01:41 发布 · 1.4k 阅读

兼容性好，功能强大的是webupload,请详细查看http://fex.baidu.com/webuploader/getting-started.html

falsh图像上传插件：http://fullavatareditor.com/

方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="uploadPreview.js" type="text/javascript"></script>

<style type="text/css">
.img_upload{max-width:500px;height:180px;background:#FFC;margin:30px auto;clear:both;}
#imgdiv{float:left;width:100px;height:100px;border:1px solid #ccc;}
a{display:inline-block; width:70px; height:35px;position:relative;text-align:center;color:#898484;font-size:15px;line-height:40px;text-decoration:none;float:left;margin-left:20px;margin-top:20px;background:red url(images/bdsc.png) no-repeat 0px 0px;}
#up_img{position:absolute;top:0;left:0;width:70px;height:35px;opacity:0; filter:alpha(opacity=0);}
</style>
</head>
<body>
<div class="img_upload">
<div id="imgdiv">
<img id="imgShow" width="100" height="100" />
</div>
<a href="javascript:void(0);"><input id="up_img" type="file" /></a>
</div>
<script>
window.onload = function() {
new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
}
</script>
</body>

</html>

方法二：

方法三

<div class="upVideo">
<div class="upLeft">视频缩略图</div>
<div class="upRight">
<div class="btn1">
<span>本地上传</span>
<input type="file" id="fileVideo" name="fileVideo" value="" onchange=""/>
</div>
<span class="spanTips">*上传图片不得超过2M大小</span>
<input type="text" value="" class="addrImg" name="addrImg" style="display:none;" />
<img class="imgShow" src="">
</div>
</div>
<input type="button" value="上传视频" id="upBtn">

$(function () {//上传图片
var showimg = $('.imgShow');//放置上传的图片
var spanTips = $(".spanTips");//图片上传出现的提示
$("#fileVideo").wrap("<form id='myupload' action='/stu/upload' method='post' enctype='multipart/form-data'></form>");
$("#fileVideo").change(function(){
$('.imgShow').css("display","block");//点击上传图片时，放置上传图片的位置才显示
$("#myupload").ajaxSubmit({
url:'/stu/upload',
dataType: 'json',
beforeSend: function() {
$(function() {//图片上传格式及大小验证
$('#fileVideo').checkFileTypeAndSize({
allowedExtensions: ['jpg','png','gif'],
maxSize: 2000,
success: function() {
spanTips.html('上传中...')
},
extensionerror: function() {
spanTips.html('允许的格式为：jpg、png、gif');
return false;
},
sizeerror: function() {
spanTips.html('图片最大不能超过2MB');
return false;
}
});
});
},
success: function(data) {
if(data.status=="success") {
var img = "/upload/student/"+data.uid+"/"+data.img;
showimg.attr("src", img);//把上传的图片的路径赋值给showimg
$('.addrImg').attr("value", data.img);//把图片的名称放到addrImg的value中
spanTips.html("上传成功");
}else{
alert(data.message);
}
},
error:function(xhr){
spanTips.html("上传失败,格式应为：jpg、png、gif且图片不大于2MB");
}
});
});
$("#upBtn").click(function(){//上传视频表单提交
$("#upForm").submit();
});
});