上传input中file文件到云端，并返回链接

最新推荐文章于 2023-10-18 13:41:43 发布

转载最新推荐文章于 2023-10-18 13:41:43 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gwcyulong/p/6677138.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过HTML表单将文件上传至云端的方法，并利用jQuery实现了文件上传后的链接获取功能。该过程涉及HTML表单元素的使用、JavaScript的FormData及XMLHttpRequest对象的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有的文件、图片等信息可以上传到云端上，然后使用链接调用，这样会更加的方便和快捷。

<form id="form">
    <input type="file" id="input">
    <input type="text" id="text">
</form>
<button id="button">上传</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $("#button").click(function () {
        if (window.FormData){
            var FormData = new FormData();
            FormData.append("file",document.getElementById("input").files[0]);
            var XMLHttpRequest = new XMLHttpRequest();
            XMLHttpRequest.open("POST","此处为上传的接口");
            XMLHttpRequest.onload = function () {
                if (XMLHttpRequest.status === 200){
                    var response = JSON.parse(XMLHttpRequest.response);
                    $("#text").val(response.data);
                } else {
                    alert("Failure");
                }
            };
            XMLHttpRequest.send(FormData);
        }
        else {
            alert("莫名错误");
        }
    });
</script>