js-图片上传

需求:单独上传图片和多图上传
实现一:使用原生ajax来完成

1、html代码界面提交按钮

<input type="file" name="pic[]" multiple id="myinput">   
<button onclick="uploadFile()">上传</button>

2、js代码

    <script>
        function uploadFile(){
            

            var files=document.getElementById("myinput").files;
            console.log(files)
             // [].forEach.call(document.getElementById("myinput").files, function(itemFile){
    //             //读取文件
    //              readImage(itemFile);
    //             // console.log(e.dataTransfer.files)
    //             // console.log(itemFile)  


    //         })

    for(var i=0;i<files.length;i++){

        readImage(files[i])
    }


    

            function readImage(obj){

            var xhr = new XMLHttpRequest();

            var fd = new FormData();

            fd.append("pic", obj);
            // fd.append("username", "xiaopingping");

            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }

            xhr.open("POST", "upload.php");

            xhr.send(fd);

            }

            

            
        }

    </script>

实现二:使用juery来实现

<script>
//这里是单张上传
        function uploadFile(){
            var fd = new FormData();

            fd.append("pic", document.getElementById("myinput").files[0]);
            
            $.ajax({
                url:"upload.php",
                type:"post",
                data:fd,
                processData:false,
                contentType:false,
                success:function(res){
                    console.log("来啦");
                    console.log(res);
                },
                dataType:"json"
            })
        }
//多张上传
        function uploadFiles(){
            var fd = new FormData();

            var imageFiles = document.getElementById("myinput").files;

            for(var i = 0; i <imageFiles.length;i ++ ){
                fd.append("pic"+i, imageFiles[i]);
            }

            $.ajax({
                url:"upload.php",
                type:"post",
                data:fd,
                processData:false,
                contentType:false,
                success:function(res){
                    console.log("来啦");
                    console.log(res);
                },
                dataType:"json"
            })
        }

    </script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,029评论 3 119
  • 山竹台风要吹过来了,微信朋友圈都是山竹的刷屏。等了两天没下雨,土很干了,只能靠人工去滋润花园的果树了~
    善滋阅读 314评论 0 0
  • 形成共识的认知是具有巨大价值的,在这个破碎的世界里,我们都不知道别人在干什么,我们更多的生活在自己的认知世界之中,...
    觞咏阅读 1,362评论 1 3
  • 彭臻华 图 说起红,我想起了太阳、红领巾、红玫瑰花、红奖状······今天下午,我带着相机去街上晃悠。结果我拍到...
    彭臻华阅读 571评论 0 2