一行代碼實現圖片上傳以及回顯

通用圖片上傳

       在原有項目中，上傳圖片地方不太多，因爲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">&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代碼抽取出來。每一個地方上傳的路徑不一樣，彈不一樣的模態框。把這三個值抽取出來。

//圖片上傳  傳入當前圖片的表單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>