javascript - 当点击div(不是button),如何实现图片 ajax/jquery上传并能直接看到,不用刷新网页

 liqiqinai 发布于 2022-12-01 07:48

网上许多ajax jquery 上传图片都要用到submit button, 请问如何上传并直接在本页看到当用户点击div? 生死攸关问题,多谢先。

  
    
      
    
    

  
  
click me to pass the photo to upload.php
6 个回答
  • #files { display:none; }
    
    document.querySelector('div[name="photoreturn"]').addEventListenr('click', function(evt) {
      evt.stopPropagation();
      document.getElementById('files').click();
    }, false);
    2022-12-01 08:07 回答
  • 不太明白题主意思,个人理解是不是想表单提交而不通过submit触发?采用H5的FormData试下

    2022-12-01 08:07 回答
  • 1、可以在上次成功后,再发一个ajax请求去请求图片内容然后显示
    2、获取要上传图片的本地路径,然后缓存起来,点击上传成功就显示(通过input的files是可以获取到图片的路径的)

    2022-12-01 08:07 回答
  • 如果你只是想预览图片,可以试下HTML5的 FileReader。


    如果你是想不刷新当前页面,上传一个图片到服务器,然后在页面上显示,那可以采用iframe上传。具体原理就是建一个隐藏的iframe,将图片传递给iframe中的form上传。然后在上传完毕的回调函数中添加图片到页面。

    2022-12-01 08:07 回答
  • 来个简单的方案,看看适不适合你的胃口;

    PHP+iFrame无刷新上传

    2022-12-01 08:07 回答
  • 两种方法
    1.file控件,利用FileReader预览上传至浏览器的图片,但并没有提交至服务器。
    2.file控件(设置透明并绝对定位在你想要的div层上)上传,ajax上传form的表单数据,并回调图片显示在你想显示的地方。

    贴上第二种方法部分代码:
    function inputchanges(self){

        var tmp_name = self.attr('name');
        var myform = document.createElement("form");
        myform.action = "后台处理地址";
        myform.method = "post";
        myform.enctype = "multipart/form-data";
        myform.style.display = "none";
        document.body.appendChild(myform);
        var form = $(myform);
        var clone = self.clone();
        clone.val("");
        self.parent().append(clone);
        clone.bind("change",function(){
            var self = $(this);
            inputchanges(self);
        });
        var fu1 = self.appendTo(form);
        form.ajaxSubmit({
            success: function (data) {
                //写上自己想要的结果
            },
            error:function(){//错误时处理}
        });

    }

    2022-12-01 08:07 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有