图片上传2

如此这样：

<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
    
    function addPic(){
        $("#uploadImage").click();
    }
    
    function asycUploadImage() {
        var value = $("#uploadImage").val();
        var extend = value.substring(value.lastIndexOf(".")+1).toLowerCase();
        if (extend != 'jpg' && extend != 'jpeg' && extend != 'png' && extend != 'pic') {
            alert("图片格式不正确");
            return false;
        }
        
        var reader = new FileReader(); 
        reader.onload = function(e){
                            // 做一些什么事 
                            var someHtml = '';
                            someHtml += '<img src="'+ e.target.result +'">';
                            $('.scroll').append(someHtml);
                            // 滚动到最底部 
                            var div = $(".wrapper")[0];
                            div.scrollTop = div.scrollHeight
                        } 
        reader.readAsDataURL(document.getElementById("uploadImage").files[0]);
        
        var options = {
                url : "some.json",
                dataType : "json",
                type : "post",
                cache : false,
                success : function(data){
                    
                }
        }
        $("#uploadImageForm").ajaxSubmit(options);
    }
</script>
</head>
<body>
    <div class="wrapper">
        <div class="scroll"></div>
    </div>
    <form id="uploadImageForm">
        <input id="uploadImage" type="file" name="multipartFile"  onchange="asycUploadImage()" style="display:none;" />
    </form>
    <div><img src="some.png" onclick="addPic()">点我选择图片</div>
</body>
</html>

1. 点击其他元素，间接触发选择文件。

2. 显示到本地

3. ajax异步上传到服务器

4. 返回url

相关阅读:
vue input输入框长度限制
vue中input输入框的模糊查询实现
腾讯云服务器配置node环境
axios中的this指向问题
腾讯云服务器 ubuntu 设置允许root用户登录
nodejs+express+mongodb写api接口的简单尝试
通过fromdata实现上传文件
阿姆斯特朗数
Mac上webstorm与git仓库建立连接
iOS学习——属性引用self.xx与_xx的区别

原文地址：https://www.cnblogs.com/zno2/p/5074043.html