Js native file upload, input how file (picture) upload and preview

effect

Explanation

• First was the need to upload the file back-office support, I am here to write the node back-end services, limited space, here is not posted back-end code, and there is a need to contact Message

dom part

• Will automatically form due to the form automatically associate input file upload button, so click the Upload File button actionto submit the file path

	<h3>文件上传：</h3>
    选择一个文件上传: <br />
    <form action="http://localhost:8090/upToImg1" method="post" enctype="multipart/form-data" id="formData2">
        名字 <input type="text" name="name"></input>
        <br />
        描述 <input type="text" name="content"></input>
        <br />
        <input type="file" name="image" size="50" onchange="fileChange(this)" />
        <br />
        <input type="submit" value="上传文件" id="submitButton" />
    </form>
    <button id="mybutton">获取</button>
    <ul id="myul"></ul>

js part

• If you need to manually upload the click of a button, simply click on the event and its default behavior can be prohibited
• I'm here with a jqueryrequest to do if the project requires, when the request needs to carry other parameters , such as I described above names and data, the need to pass data transfer with input into the box
• If you want to make file limit, according to onchangethe event handler, the function returns or reject false promise of failure that prevents submit submit

	var submitButton = document.getElementById('submitButton');
    var myul = document.getElementById('myul');
    var mybutton = document.getElementById('mybutton');
    submitButton.onclick = function (e) {
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        var formData = new FormData($("#formData2")[0]);
        $.ajax({
            url: 'http://localhost:8090/upToImg1',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                console.log(returndata);
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    }

    function fileChange(target) {
        var fileSize = 0;
        fileSize = target.files[0].size;
        var size = fileSize / 1024;
        if (size > 1000) {
            alert("附件不能大于1M");
            target.value = "";
            return false;   //阻止submit提交
        }
        var name = target.value;
        var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
        if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
            alert("请选择图片格式文件上传(jpg,png,gif,gif等)！");
            target.value = "";
            return false;   //阻止submit提交
        }
    }
    mybutton.onclick = function () {
        $.ajax({
            url: 'http://localhost:8090/upToImg1',
            type: 'get',
            success: function (returndata) {
                console.log(returndata);
                var str='';
                returndata.data.forEach(ele => {
                    str+=`<li><img src="http://localhost:8090/upload/${ele.src}" alt="${ele.content}">${ele.name}</li>`
                });
                $("#myul").append(str)
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    }

• After a successful upload data to make the corresponding operation can be, I am here after a successful upload by clicking 获取get a list of files to upload button and by string concatenation dynamic way to add a picture of ulthe

注意

Because the picture is stored on the server side, the picture just returned from the picture file name, in order to pass imgthe label to showcase images to be spliced to match the correct path to the back-end store code