关于图片预览和异步上传的问题

baidu_34204372 2017-03-09 10:17:00

不想用form进行图片上传，有什么好办法实现js上传吗？
昨天查了查，今本都推荐使用jquery-file-upload插件，引入的东西太多，不想采用这个方法。想自己封装个方法。

1、图片预览
IE环境下使用滤镜可以进行图片预览
非IE环境使用FileReader转换为base64进行图片预览

2、提交
非IE环境可以直接提交转换后的base64到后台
IE环境下不使用表单提交该怎么处理？

...全文

143 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhangsheng_1992 2017-03-09

打赏
举报

对了这种上传会有跨域问题记得后端一定要配置这两项 node res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'POST,OPTIONS'); php header('Access-Control-Allow-Origin', '*'); headerres.header('Access-Control-Allow-Methods', 'POST,OPTIONS');

zhangsheng_1992 2017-03-09

打赏
举报

我做了个demo https://www.zhangsheng1992.com/file/ 你可以去试试别乱来哈

代码就这点


<!DOCTYPE html>
<html>
<head>
    <title>上传</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <style>
        .border{width:200px;border:1px solid #ccc;height:20px;margin-top:20px;}
        .progress{color:#FFFFFF;text-align:center}
    </style>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="resource" name="resource">
        <button type="button" onclick="upload()">新建任务</button>
    </form>
    <p style="margin-top:20px;">上传进度</p>
    <div class="border">
        <div class="progress"></div>
    </div>
    上传进度<span id="num"></span><a href="javascript:void(0);" onclick="resetUpload()">取消上传</p>
    <script src="/js/upload.js"></script>
</body>
</html>

upload.js


var xhr = new XMLHttpRequest();

function upload(){
    $.ajax({
        type: "GET",
        url: "/gettoken",
        success: function(data){
            console.log(data);
            if(data.status == 1){
                submitForm(data.data);
            }else{
                alert(data.message);
            }
        }
    });
}
    
function submitForm(token){
    var formData = new FormData($( "#uploadForm" )[0]);
    $(".progress").css({"height":"20px","background":"green","width":"0px"});
    xhr.upload.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            var width = Math.ceil(percentComplete*2);
            $(".progress").css({"width":width+"px"});
            console.log("上传中",percentComplete);
            $("#num").html(percentComplete+"%");
        }else {
            $(".progress").css({"width":"200px"});
        }
    }, false);
    xhr.addEventListener("load", function(evt){
        var message = evt.target.responseText;
//        obj = eval("("+message+")");
//        if(obj.status == 1){
//            $("#"+fileId).val(obj.picName);
//            document.getElementById("show"+fileId+"Me").innerHTML = "已上传";
//              alert("上传成功!");
//        }else{
//            alert(obj.message);
//        }
//        clearInterval(timer);
        console.log("服务器返回",message);
    }, false);
    //发送请求
    //http://www.zhangsheng.com/index.php
    xhr.open("POST", "/upload?token="+token);
    xhr.send(formData); 
}

/**
 * 取消上传
 * @returns {undefined}
 */
function resetUpload(){
    xhr.abort();
}