原生js文件上传，input如何实现文件（图片）上传与预览

效果

说明

• 首先文件上传得需要后台支持，我这里用的node写的后端服务，篇幅有限，这里就不贴后端代码了，有需要的留言联系

dom部分

• 由于form表单自动关联input文件上传按钮，故点击上传文件按钮时会自动往 action 路径提交文件

	<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部分

• 如果需要手动点击按钮上传，只需对其进行点击事件并禁止默认行为即可
• 我这里用 jquery 做的请求，如果项目需要，请求时 需要携带其它参数 ，比如像我上面的名字和描述数据，可以把需要传递的数据用input框传递进去
• 如果想对文件做限制，可根据onchange事件处理，函数返回false或promise的reject失败，即会阻止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);
            }
        });
    }

• 上传成功后对相应数据做需要操作即可，我这里上传成功后通过点击获取按钮得到上传文件的列表，并通过 字符串拼接 的方式动态添加图片到 ul 上

注意

由于图片是在服务端存储，返回的图片只是图片的文件名，要想通过 img 标签展示图片，需拼接正确路径以匹配到后端存储代码