插件上传图片总结
webuploader.html5only.min.js 上传插件
在插件的使用
引入插件
<!--上传插件 --> <link rel="stylesheet" type="text/css" href="public/diyUpload/css/webuploader.css"> <link rel="stylesheet" type="text/css" href="public/diyUpload/css/diyUpload.css"> <script type="text/javascript" src="public/diyUpload/js/webuploader.html5only.min.js"></script> <script type="text/javascript" src="public/diyUpload/js/diyUpload.js"></script>
上传按钮
修改css样式：由于插件的生成的样式和页面设计的上传按钮的样式不一样，需要修改上传按钮的样式
<a href="javascript:void(0)" class="ShangC db fl" id="spic_upload">上传</a>
调用上传插件
$("#spic_upload").diyUpload({
url:'xxx.upload',
buttonText:'上传',
fileSingleSizeLimit:5000 * 1024,
success:function( data ) {
var src = "<?php echo $pic_url; ?>";
$(".spic").html("<img src="+ src +data.thmub_file + ">");
$("#spic").val(data.filename);
$(".parentFileBox").remove();
},
error:function( err ) {
}
});
该插件由于不兼容ie7,ie8等低版本浏览器，在ie低版本下报错
最后换成原始的
<input type="file" name="spic_upload" >
但这种不符合页面设计最后还是需要修改
jQuery插件之ajaxFileUpload
引入插件
<script src="jquery-1.7.1.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script>
在使用这个插件的时候，老是报跨域问题
导致每次跨域上传图片时，可以成功上传到服务器上，但是不能正确的返回信息，总是进入error方法中，正确应该进入success方法
最终没有找打解决办法
用 iframe 上传
也出现了跨域的问题，最终没有找打解决办法
uploadify 插件
使用该插件过程中遇到的问题
<dl> <dt class="fl">年龄</dt> <dd class="fl"> <input type="text" name="sage" value="" /> </dd> </dl> <dl> <dt class="spa1_dt">上传我的真实照片</dt> <dd class="clear pr"> <div class="pic1 fl spic"> <p>请点击上传您的真实照 片，照片显示比例为3*4，要 求手拿一张写有两人 “游戏ID***** 游戏ID**** 我爱MAT”的纸</p> </div> <input type="hidden" name="spic" id="spic" value="" /> <div style="position: absolute; left:339px;top:275px;"><input type="file" name="spic_upload" id="spic_upload"></div> </dd> </dl>
使用uploadify插件需要把在input上面添加id，然后绑定上传事件，由于Input继承和表单里其他input样式导致插件的上传按钮定位发生了变化，点击
上传按钮没有任何反应，正常情况下点击上传按钮会弹出上传对话框的
这样就可以选择要上传的图片了，但是由于样式问题导致的点击上传按钮问题，经过排查，我把官网提供的例子放到我代码里
<form action="" method="post" enctype="multipart/form-data" name="" id=""> <div class="n_bar1 clear"> <div class="n_bar1_left fl"> <dl> <dt class="fl">账号</dt> <dd class="fl"> <input type="text" name="saccount" readonly="true" value=""/> </dd> </dl> <dl> <dt class="fl">大区</dt> <dd class="fl zone_server"> </dd> </dl> <dl> <dt class="fl">游戏ID</dt> <dd class="fl"> <input type="text" name="sgameid" readonly="true" value=""/> </dd> </dl> <dl> <dt class="fl">游戏昵称</dt> <dd class="fl"> <input type="text" name="snickname" readonly="true" value=""/> </dd> </dl> <dl> <dt class="fl">性别</dt> <dd class="fl"> <input type="radio" name="sex" value="1" style="width:auto;height:auto;" />男 <input type="radio" name="sex" value="2" style="width:auto;height:auto;" />女 </dd> </dl> <dl> <dt class="fl">年龄</dt> <dd class="fl"> <input type="text" name="sage" value="" /> </dd> </dl> <dl> <dt class="spa1_dt">上传我的真实照片</dt> <dd class="clear pr"> <div class="pic1 fl spic"> <p>请点击上传您的真实照 片，照片显示比例为3*4，要 求手拿一张写有两人 “游戏ID***** 游戏ID**** 我爱MAT”的纸</p> </div> <input type="hidden" name="spic" id="spic" value="" /> <input type="file" name="spic_upload" id="spic_upload"> </dd> </dl> <a href="javascript:void(0)" class="db ti_9 fl n_btn2 joinOnebtn">提交</a> </div> </form>
放在form表单外面的位置点击上传按钮可以，
<input type="file" name="spic_upload" id="spic_upload">
我把上传按钮放到dd里面就会导致点击上传按钮无效的问题，最后把上传按钮放在dd外面就可以，这样解决了上传按钮无效的问题了，主要是dd里面的input样式导致上传按钮点击无效
上传按钮位置无效的问题解决了，开始解决上传按钮样式和网页上的上传按钮样式不一样的问题了，主要修改buttonImage里的背景图片和页面上一样的上传按钮图片就可以了，然后修改上传按钮的css样式
制作好上传按钮的背景图片
bg.png 为上传按钮的背景图片
'buttonImage':'public/uploadify/bg.png',
/*
元素样式
.uploadify-button {
background-color: #505050;
background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #505050),
color-stop(1, #707070)
);
background-position: center top;
background-repeat: no-repeat;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #808080;
color: #FFF;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
width: 100%;
}
*/
修改后的样式
.uploadify-button {
background-image: -moz-linear-gradient(center bottom , #505050 0%, #707070 100%);
background-position: center top;
background-repeat: no-repeat;
color: #fff;
font: bold 12px Arial,Helvetica,sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
width: 100%;
}
/*
.uploadify:hover .uploadify-button {
background-color: #606060;
background-image: linear-gradient(top, #606060 0%, #808080 100%);
background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #606060),
color-stop(1, #808080)
);
background-position: center bottom;
}
*/
修改后的样式
.uploadify:hover .uploadify-button {
background-image: linear-gradient(top, #606060 0%, #808080 100%);
background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #606060),
color-stop(1, #808080)
);
background-position: center bottom;
}
按钮样式结局了，开始结局按钮在页面中位置的问题了，最终想到的办法是在input外层包裹一层div，对div进行定位
<div style="position: absolute; left:339px;top:275px;"><input type="file" name="eflightpic_upload" id="eflightpic_upload"></div>
<!--引入上传插件 -->
<script src="public/uploadify/jquery.min.js" type="text/javascript"></script> <script src="public/uploadify/jquery.uploadify.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="public/uploadify/uploadify.css">
//我的图片上传
$('#spic_upload').uploadify({
'formData' : {
'file_name' : 'spic_upload_one'
},
'removeTimeout' : 1,
'buttonImage':'public/uploadify/bg.png',
fileSizeLimit:'2MB',
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
method:'post',
swf: 'public/uploadify/uploadify.swf',
//swf的相对路径，必写项
uploader: 'xxx.upload',
'queueSizeLimit' : 1,
'onUploadComplete': function(file){
console.log(file);
},
//每个文件即将上传前触发
'onUploadSuccess':function(file, data, response){
var data = eval("("+data+")");
if(data.code =='success'){
$("input[name='spic']").val(data.filename);
var pic = "<?php echo $pic_url;?>"+'/'+data.filename;
$(".spic").html("<img src='"+pic+"' width='224' height='298'>");
}else if(data.code == 'error'){
alert(data.msg);
}
}
//每个文件上传成功后触发
});
上传多张图片，原先生成的图片文件名是按照 账号+区服 +time()时间戳，md5后生成的文件名
$newFile = md5($this->md5filename.time());
可是这样导致了，后上传的文件名和前面生成的文件名相同了，导致后面的图片覆盖了前面的图片