点击不同位置实现同一个文件上传框上传头像
2016-09-20 17:15
323 查看
因需求增加,需要点击如下文字上传头像
如下图:
原本是点击头像,可以上传头像,头像下面是个 fiel类型的 input 标签, 点击可以选取图片上传,
需求增加,要点击蓝色文字那里,也要可以实现头像上传。
头像上传的 HTML代码:
<div class="upload-picture">
<p>
<span><img src="${ctx }/resources/img/min/people1.jpg" id="uers_portrait" ></span>
<i></i>
<b><img src="${ctx }/resources/img/min/upload-certifi.png" >
<input type="file" size="30" id="portrait_upload_file" onchange="portrait_upload();" name="portrait_upload_file"
accept="text/xml,text/xml-external-parsed-entity,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</b>
</p>
<em>修改头像<input type="file" size="30"></em>
<div class="input-tips margin-l12 hide-wanring" id="result-Prompt" style="display:none;"></div>
<p class="v-tips">支持JPG、JPEG、PNG、GIF
格式,最佳比例124*124px,
图片大小不超过500k</p>
</div>
js 代码 :
/**
* 头像上传
*/
function portrait_upload() {
var file = $("#portrait_upload_file").val();
if (checkNull(file)) {
showWarning("请选择上传的文件!");
return false;
}
if (!checkMaxSize("portrait_upload_file", 200*1024)) {
return false;
}
var filepath = file.substring(file.lastIndexOf('.') + 1, file.length).toLocaleLowerCase();
if (filepath != 'png' && filepath != 'jpg' && filepath != 'jpeg') {
showWarning("只能上传png、jpg或jpeg格式的文件!");
return false;
}
$.ajaxFileUpload({
type : 'POST',
url : WEB_URL + "/views/system/user/uploadPortrait", // ajax请求url
secureuri : false,
dataType: 'text', //返回值类型 一般设置为json
fileElementId : 'portrait_upload_file', // 文件选择框的id属性
complete : function(data, status) { // 相当于java中try语句块的用法
try {
var data = data.responseText;
if (data.indexOf(">") != -1){
data = data.substring(data.indexOf(">") + 1, data.lastIndexOf("<"));
}
data = eval("(" + data + ")");
if (data.status != SUCCESS) {
if(data.msg && data.msg != "") {
$("#result-Prompt").html(data.msg);
$("#result-Prompt").show();
}else {
$("#result-Prompt").html("上传失败");
$("#result-Prompt").show();
}
}else {
readPortrait();
$("#result-Prompt").html("上传成功");
$("#result-Prompt").show();
}
} catch(e) {
$("#result-Prompt").html("上传失败");
$("#result-Prompt").show();
}
}
});
}
思路:本来是想让两个input标签的点击事件都绑定到同一个方法上(portrait_upload();),上传的都是 头像input标签浏览的图片,后来是不行的,
后面改变了一下思路,不管点击的是哪里,上传的都是头像input标签浏览的图片, 就是说:在点击“修改头像” 的文字的事件上,绑定一个方法,方法里的内容,就模拟头像input标签被点击了
如下代码:
function(){
$("#portrait_upload_file").get(0).click();
}
最后的实现,因为一直上传头像都只用了一个input标签,,另一个都没有什么实际用处,我把input标签改为了a标签,因为a标签有下划线,通过样式把下划线取消了(text-decoration:none;),就完美解决了
头像上传的 HTML代码:
<div class="upload-picture">
<p>
<span><img src="${ctx }/resources/img/min/people1.jpg" id="uers_portrait" ></span>
<i></i>
<b><img src="${ctx }/resources/img/min/upload-certifi.png" >
<input type="file" size="30" id="portrait_upload_file" onchange="portrait_upload();" name="portrait_upload_file"
accept="text/xml,text/xml-external-parsed-entity,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</b>
</p>
<em><a id="portrait_file_upload_a" style="text-decoration:none;" >修改头像</a></em>
<!-- <em>修改头像<input type="file" size="30"></em> -->
<div class="input-tips margin-l12 hide-wanring" id="result-Prompt" style="display:none;"></div>
<p class="v-tips">支持JPG、JPEG、PNG、GIF
格式,最佳比例124*124px,
图片大小不超过500k</p>
</div>
js 代码 增加了如下代码:
$(document).ready(function(){
$("#portrait_file_upload_a").click(function(){
$("#portrait_upload_file").get(0).click();
});
}
用id选取a标签,点击事件绑定了一个function,function的内容就是,当点击了a标签的时候就会通过JS动态去点击一次头像上传的input标签,然后input标签就能拿到浏览的图片了。
如下图:
原本是点击头像,可以上传头像,头像下面是个 fiel类型的 input 标签, 点击可以选取图片上传,
需求增加,要点击蓝色文字那里,也要可以实现头像上传。
头像上传的 HTML代码:
<div class="upload-picture">
<p>
<span><img src="${ctx }/resources/img/min/people1.jpg" id="uers_portrait" ></span>
<i></i>
<b><img src="${ctx }/resources/img/min/upload-certifi.png" >
<input type="file" size="30" id="portrait_upload_file" onchange="portrait_upload();" name="portrait_upload_file"
accept="text/xml,text/xml-external-parsed-entity,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</b>
</p>
<em>修改头像<input type="file" size="30"></em>
<div class="input-tips margin-l12 hide-wanring" id="result-Prompt" style="display:none;"></div>
<p class="v-tips">支持JPG、JPEG、PNG、GIF
格式,最佳比例124*124px,
图片大小不超过500k</p>
</div>
js 代码 :
/**
* 头像上传
*/
function portrait_upload() {
var file = $("#portrait_upload_file").val();
if (checkNull(file)) {
showWarning("请选择上传的文件!");
return false;
}
if (!checkMaxSize("portrait_upload_file", 200*1024)) {
return false;
}
var filepath = file.substring(file.lastIndexOf('.') + 1, file.length).toLocaleLowerCase();
if (filepath != 'png' && filepath != 'jpg' && filepath != 'jpeg') {
showWarning("只能上传png、jpg或jpeg格式的文件!");
return false;
}
$.ajaxFileUpload({
type : 'POST',
url : WEB_URL + "/views/system/user/uploadPortrait", // ajax请求url
secureuri : false,
dataType: 'text', //返回值类型 一般设置为json
fileElementId : 'portrait_upload_file', // 文件选择框的id属性
complete : function(data, status) { // 相当于java中try语句块的用法
try {
var data = data.responseText;
if (data.indexOf(">") != -1){
data = data.substring(data.indexOf(">") + 1, data.lastIndexOf("<"));
}
data = eval("(" + data + ")");
if (data.status != SUCCESS) {
if(data.msg && data.msg != "") {
$("#result-Prompt").html(data.msg);
$("#result-Prompt").show();
}else {
$("#result-Prompt").html("上传失败");
$("#result-Prompt").show();
}
}else {
readPortrait();
$("#result-Prompt").html("上传成功");
$("#result-Prompt").show();
}
} catch(e) {
$("#result-Prompt").html("上传失败");
$("#result-Prompt").show();
}
}
});
}
思路:本来是想让两个input标签的点击事件都绑定到同一个方法上(portrait_upload();),上传的都是 头像input标签浏览的图片,后来是不行的,
后面改变了一下思路,不管点击的是哪里,上传的都是头像input标签浏览的图片, 就是说:在点击“修改头像” 的文字的事件上,绑定一个方法,方法里的内容,就模拟头像input标签被点击了
如下代码:
function(){
$("#portrait_upload_file").get(0).click();
}
最后的实现,因为一直上传头像都只用了一个input标签,,另一个都没有什么实际用处,我把input标签改为了a标签,因为a标签有下划线,通过样式把下划线取消了(text-decoration:none;),就完美解决了
头像上传的 HTML代码:
<div class="upload-picture">
<p>
<span><img src="${ctx }/resources/img/min/people1.jpg" id="uers_portrait" ></span>
<i></i>
<b><img src="${ctx }/resources/img/min/upload-certifi.png" >
<input type="file" size="30" id="portrait_upload_file" onchange="portrait_upload();" name="portrait_upload_file"
accept="text/xml,text/xml-external-parsed-entity,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</b>
</p>
<em><a id="portrait_file_upload_a" style="text-decoration:none;" >修改头像</a></em>
<!-- <em>修改头像<input type="file" size="30"></em> -->
<div class="input-tips margin-l12 hide-wanring" id="result-Prompt" style="display:none;"></div>
<p class="v-tips">支持JPG、JPEG、PNG、GIF
格式,最佳比例124*124px,
图片大小不超过500k</p>
</div>
js 代码 增加了如下代码:
$(document).ready(function(){
$("#portrait_file_upload_a").click(function(){
$("#portrait_upload_file").get(0).click();
});
}
用id选取a标签,点击事件绑定了一个function,function的内容就是,当点击了a标签的时候就会通过JS动态去点击一次头像上传的input标签,然后input标签就能拿到浏览的图片了。
相关文章推荐
- 点击不同位置实现同一个文件上传框上传头像
- PHP 实现本地多文件同时上传到服务器端不同文件夹下
- jsp中点击图片弹出文件上传界面及预览功能的实现
- iOS通过http post 文件流上传文件(头像)代码实现
- 如何实现在一个界面上点击不同的位置,会有跳转到不同的Activity上(假设背景是一个图片)
- jsp中点击图片弹出文件上传界面及实现预览
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- 利用js实现无刷新上传头像(或文件)并显示进度条
- js实现点击按钮弹出上传文件的窗口
- 使用fileupload实现文件上传,并自动生成不同的文件夹
- 用struts2 完成一个简单的通讯录,实现增删改查,分页,文件上传(头像),表单验证(两种方法)
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- 实现向服务器上传图片文件、实现不同方式的form表单提交方式
- swfupload实现用户文件上传以及头像的截取
- rsync实现网站的备份,文件的同步,不同系统的文件的同步,如果是windows的话,需要windows版本cwrsync【文件从本地上传到linux服务器有什么更好的工具?】
- django filefield实现动态改变文件上传位置upload_to
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- centeros6.5使用openresty实现文件上传,并按不同时期存储在不同目录
- jsp两个不同组件实现文件上传总结--cos.jar包和commons-fileupload.jar包