图片投票图片上传

 

图片投票项目，用户自己上传三张照片，程序将上传的三张照片上传到七牛服务器，并将回调的保存在七牛服务器的地址的链接上传到自己的数据库。

// 图片上传
$('#upload').click(function(){
var inputSize = $("#photo_value_cont>input").size();
if(inputSize >= 3){
alert("最多上传三张图片！");
return;
}
var $btn = $('#upload');
// if($(this).hasClass('disabled'))
// return;
// $btn.addClass("disabled");
$('#photo').click();
});
$("#photo_preview_cont .close").live("click",function(){
var index = $(this).parent().index();
$(this).parent().remove();
$("#photo_value_cont").find("input").eq(index).remove();
});

var index = 1;
$('#photo').change(function(){
var dom = $("<span data-index=" + index + "><img src='"+getJsCssDomain+"/image/mobile/newvote/touming.png' /><span class='close'>X</span></span>");

$('#photo_preview_cont').append(dom);
// 开始处理上传图片
imgPreview(dom.find('img'), this, function(imgUrl){
//图片上传成功回调方法
var $btn = $('#upload');
var inputSize = $("#photo_value_cont>input").size();
if(inputSize < 3){
$("#photo_value_cont").append("<input type='hidden' value='"+imgUrl+"'/>");
}
});
});

注意：需要在页面加上七牛的token。

<script type="text/javascript">

var window.qiniuUpToken='<%=QiniuUpTokenUtil.getUpToken()%>';
window.uploadBasePath = "base64upload/nianhui/<%=aid%>/";

</script>

 

<!-- 报名提交内容模块 -->
<article class="setInfo" id="setInfo">
<img class="infoBg" src="<%=platform.getJsCssDomain() %>image/mobile/djzb/info.jpg?v=1"/>
<input type="text" name="username" class="username" id="username" value="" />
<input type="tel" name="tel" id="tel" class="tel" value="" />
<textarea name="userwords" rows="" class="userwords" cols="" placeholder="宣言关键字：颜值，气质，女神，男神，钻石，珠宝"></textarea>
<a class="saveInfo" href="javascript:void(0);"></a>
<a href="javascript:void(0);" class="beauty disable1">女神</a>
<a href="javascript:void(0);" class="handsome disable2">男神</a>
<a href="javascript:void(0);" id="upload"></a>
<div id="photo_preview_cont">
</div>
<input type='file' accept="image/*" style="display:none;" name='photo' id='photo' />
<div id="photo_value_cont"></div>
<input type='hidden' name='sex' id='sex' value=""/>
<input type='hidden' name='itemId' class='itemId' value="0"/>
<div class="baomin_rule">
<p class="p_title">
<span><img src="<%=platform.getJsCssDomain() %>image/mobile/djzb/zuan2.png?v=1"></span> 报名详情
</p>
<p class="p_content">1、 填写真实的姓名、联系电话与所在城市，为确保参赛选手顺利获奖，请保证资料的真实性。</p>
<p class="p_content">2、 每个微信号可上传3张照片，要求近期正面照（半身照、全身照）。蒂爵珠宝将审核参赛者照片的精美度及规范性，通过审核后，即报名成功。</p>
<p class="p_content">3、 写下20~200字的参赛宣言，关键字为 "女神"、"男神"、"颜值"、"气质"、"钻石"、"珠宝"。</p>
</div>
</article>