一行代码实现图片上传以及回显

时间 2019-11-11

标签一行代码实现图片上传以及繁體版

原文原文链接

通用图片上传

在原有项目中，上传图片地方不太多，因为input框为file类型的时候，显示的挺丑的，因而咱们作成点击上传图片按钮后，会弹框，把上传文件的输入框放在弹框里面。即起到提示做用，又避免了样式难看，效果以下：javascript

并且每个上传图片的地方，都单独写一个弹框，单独的js，来获取input框的值，来上传图片，以下html

模态框代码
<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">&times;</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代码抽取出来。每一个地方上传的路径不一样，弹不一样的模态框。把这三个值抽取出来。java

//图片上传  传入当前图片的表单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表单，设置隐藏ajax

<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;
    }
}

这样的话，有隐藏的表单了，而后须要点击按钮来调用上传的通用代码了、async

function openImgBox(fun){
    var fileInput = $('#fileupload').get(0);
    fileInput.addEventListener("change", function(e) {
        upLoadImg(fun);//调用通用的上传的js方法
    }, false);
    $('#fileupload').click();//执行点击事件
}

而后在页面中，设置一个点击事件。而后在js中只有设置自个的回调函数就行了，ide

<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代码为url

//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框提取出来，由于若是不提出来，用户上传同一张图片的时候，没有提示。spa

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();
}

页面中上传按钮上传的方法为code

<a onclick="openImgBox(returnImageObj('preview_goodImg',1,'goodImg'))" type="button" class="btn btn-success">上传图片</a>