通用图片上传
在原有项目中，上传图片地方不太多，由于input框为file类型的时候，显示的挺丑的，于是我们做成点击上传图片按钮后，会弹框，把上传文件的输入框放在弹框里面。即起到提示作用，又避免了样式难看，效果如下：
而且每一个上传图片的地方，都单独写一个弹框，单独的js，来获取input框的值，来上传图片，如下
模态框代码
<div id="upLoadModal" class="modal fade bs-example-modal-sm" tabindex="1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h5 class="modal-title">图片上传</h5>
</div>
<div class="modal-body">
<form role="form" id="formImg" enctype="multipart/form-data">
<input type="file" id="imageFileInput" name="imageFileInput" class="file"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="upLoadImg()">上传</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
//商品图片上传
function upLoadImg() {
var file = $("#imageFileInput");
var fileSuffix = file.val().substr(file.val().indexOf('.'));
if (fileSuffix == ".JPG" || fileSuffix == ".JPEG" || fileSuffix == ".PNG" ||
fileSuffix == ".jpg" || fileSuffix == ".jpeg" || fileSuffix == ".png") {
var formData = new FormData($("#formImg")[0]);
$.ajax({
url: 。。。。,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
//处理图片，回显代码
$("#upLoadModal").modal('hide');
}
});
} else {
wbAlert("请选择正确图片格式，支持[.jpg .jpeg .png]格式", 'warning', 3000);
return;
}
}
需要上传图片的地方少还比较好，不过，新开了一个项目，大量涉及上传图片。有的一个界面需要十几处不同的上传地方。不说需要写多少代码。想想十几处命名的地方。头皮发麻，不合在一起不行了。首先请求的js是大头，除了路径不同，其他的几乎全部相同，先把js代码抽取出来。每个地方上传的路径不同，弹不同的模态框。把这三个值抽取出来。
//图片上传 传入当前图片的表单id和输入框id,以及给不同的地方回显图片的逻辑代码
function upLoadImg(fun,formId,inputId) {
var file = $(inputId);
var fileSuffix = file.val().substr(file.val().indexOf('.'));
if (fileSuffix == ".JPG" || fileSuffix == ".JPEG" || fileSuffix == ".PNG" ||
fileSuffix == ".jpg" || fileSuffix == ".jpeg" || fileSuffix == ".png") {
var formData = new FormData($(formId)[0]);
$.ajax({
url: uploadUrl,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: fun,
error:function (e) {
wbAlert("上传图片失败，请重新上传", 'warning', 3000);
}
});
} else {
wbAlert("请选择正确图片格式，支持[.jpg .jpeg .png]格式", 'warning', 3000);
return;
}
}
可是这样的话，十几个模态框还是无法避免，还是比较多的，抽取成公用的模态框？每次上传都要弹框，还是比较麻烦的。看网上有的上传图片直接点击就打开选择文件框了。去看看人家是如何实现的。首先在一个通用的地方，写一个form表单，设置隐藏
<div id="div_fileupload" style="display: none">
<form role="form" id="formImg" enctype="multipart/form-data">
<input type="file" id="fileupload" name="fileupload" value="" />
</form>
</div>
function upLoadImg(fun) {
var file = $("#fileupload");
var fileSuffix = file.val().substr(file.val().indexOf('.'));
if (fileSuffix == ".JPG" || fileSuffix == ".JPEG" || fileSuffix == ".PNG" ||
fileSuffix == ".jpg" || fileSuffix == ".jpeg" || fileSuffix == ".png") {
var formData = new FormData($("#formImg")[0]);
$.ajax({
url: uploadUrl,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: fun,
error:function (e) {
wbAlert("上传图片失败，请重新上传", 'warning', 3000);
}
});
} else {
wbAlert("请选择正确图片格式，支持[.jpg .jpeg .png]格式", 'warning', 3000);
return;
}
}
这样的话，有隐藏的表单了，然后需要点击按钮来调用上传的通用代码了、
function openImgBox(fun){
var fileInput = $('#fileupload').get(0);
fileInput.addEventListener("change", function(e) {
upLoadImg(fun);//调用通用的上传的js方法
}, false);
$('#fileupload').click();//执行点击事件
}
然后在页面中，设置一个点击事件。然后在js中只有设置自个的回调函数就好了，
<a href="javascript:;" class="btn btn-xs blue" onclick="openImgBox(fun)">上传图片</a>
感觉好像大功告成，开始撸码，一个页面还没写完，js代码的关于图片回调的函数又是一堆，明明功能相同，却一堆，而且命名又是upload1,upload2.... 能不能把回调函数也给省略了。就是单纯的回填，是不是只要传图片id就可以，有的按钮是一个按钮，点击三次，上传图片到不同的框里面，所以id需要取的有规律点。最终通用回调为
function returnImageObj(imgid,imgnum,inputid) {
var shopUploadImg = {};
shopUploadImg.offectfun = function () {
var img = "";
if (imgnum == 1){
img = $("#"+imgid)[0];
if (img.src.indexOf("upload_icon.png") != -1){
return true;
}
} else {
for (var i = 1; i <= imgnum; i++) {
img = $("#"+imgid + i)[0];
if (img.src.indexOf("upload_icon.png") != -1){
return true;
}
}
}
wbAlert("已经上传了"+imgnum+"张图片啦！", 'warning', 3000);
return false;
};
shopUploadImg.upload = function (data) {
imageProcess = true;
var img = "";
if (imgnum == 1){
var img = $("#"+imgid)[0];
$("#"+inputid).val(data.strPath);
$("#"+imgid).attr("src",data.strPath);
} else {
for (var i = 1; i <= imgnum; i++) {
var img = $("#"+imgid + i)[0];
if (img.src.indexOf("upload_icon.png") != -1){
$("#"+inputid + i).val(data.strPath);
$("#"+imgid + i).attr("src",data.strPath);
return;
}
}
}
};
return shopUploadImg;
}
通用的上传js代码为
//imageProcess设置的boolean类型，防止上一张未上传完，又上传一张
function upLoadImg(fun) {
if (imageProcess) {
imageProcess = false;
//判断是否能上传图片
if (!fun.offectfun()){
imageProcess = true;
return;
}
var file = $("#fileupload");
var fileSuffix = file.val().substr(file.val().indexOf('.'));
if (fileSuffix == ".JPG" || fileSuffix == ".JPEG" || fileSuffix == ".PNG" ||
fileSuffix == ".jpg" || fileSuffix == ".jpeg" || fileSuffix == ".png") {
var formData = new FormData($("#formImg")[0]);
$.ajax({
url: uploadUrl,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: fun.upload,
error:function (e) {
imageProcess = true;
wbAlert("上传图片失败，请重新上传", 'warning', 3000);
return;
}
});
} else {
wbAlert("请选择正确图片格式，支持[.jpg .jpeg .png]格式", 'warning', 3000);
return;
}
}else {
wbAlert("图片正在上传中，请稍候", 'warning', 3000);
return;
}
}
调用通用上传方法的js代码为:其中把通用form表单里面的input框提取出来，因为如果不提出来，用户上传同一张图片的时候，没有提示。
var inputFileupload = "<input type="file" id="fileupload" name="fileupload" value="" />";
function openImgBox(fun){
$('#formImg').html(inputFileupload);
var fileInput = $('#fileupload').get(0);
fileInput.addEventListener("change", function(e) {
upLoadImg(fun);
}, false);
$('#fileupload').click();
}
页面中上传按钮上传的方法为
<a onclick="openImgBox(returnImageObj('preview_goodImg',1,'goodImg'))" type="button" class="btn btn-success">上传图片</a>
扫一扫
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
