• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

javascript – 多图片上传预览和ajax发送的问题

php 搞代码 3年前 (2022-01-25) 26次浏览 已收录 0个评论
文章目录[隐藏]

我现在做一个图片发送的功能,但是预览的都是最后选择的照片,并且所有的照片都一样,还有就是图片上传该怎么用ajax发送,多谢了。以下是代码:
HTML代码:

<code>    <div class="upload-layer">        <ul class="upload-ul">            <li>                                <label for="imglist" id="img-label">选择文件                </label>            </li>        </ul>        <div class="upload-sub">                    </div>    </div></code>

js代码:
这是图片预览部分js代码

<code>$(function(){    $("input[type='file']").change(function(evt){        var files = evt.target.files;            for (var i = 0, f; f = files[i]; i++) {                if (!f.type.match('image.*')) {                continue;            }                var reader = new FileReader();            reader.readAsDataURL(f);            reader.onload = (function() {                return function(e) {                    $(".upload-ul").prepend("<li></li>");                    $(".upload-ul img").attr("src",e.target.result);//预览图片的位置                };            })(f);        }    });})</code>

这是ajax发送部分代码:

<code>$("#upload-btn").click(function(){    var formData = $("imglist").attr('name');    formData.append('img',fileData);    $.ajax({        type: "POST",        url: "{{ path('advsimghandle_') }}",        dataType:"json",        data:{            imageUpload: formData        },        success:function(msg){        }    })})</code>

请问我改怎么获取这个name的属性?还有文件预览都是预览到同样的一张图片,譬如说我选择两张图片,结构都是预览到第二张,第一张好像是循环的时候被过滤掉了,是不是该判断还是?,我改怎么改这个代码才能分别预览到照片。另外ajax也有问题的,通过firebug查看是没有post东西到后台的。多谢了。

回复内容:

我现在做一个图片发送的功能,但是预览的都是最后选择的照片,并且所有的照片都一样,还有就是图片上传该怎么用ajax发送,多谢了。以下是代码:
HTML代码:

<code>    <div class="upload-layer">        <ul class="upload-ul">            <li>                                <label for="imglist" id="img-label">选择文件                </label>            </li>        </ul>        <div class="upload-sub">                    </div>    </div></code>

js代码:
这是图片预览部分js代码

<code>$(function(){    $("input[type='file']").change(function(evt){        var files = evt.target.files;            for (var i = 0, f; f = files[i]; i++) {                if (!f.type.match('image.*')) {                continue;            }                var reader = new FileReader();            reader.readAsDataURL(f);            reader.onload = (function() {                return function(e) {                    $(".upload-ul").prepend("<li></li>");                    $(".upload-ul img").attr("src",e.target.result);//预览图片的位置                };            })(f);        }    });})</code>

这是ajax发送部分本文来源gaodai$ma#com搞$$代**码)网8搞代gaodaima码代码:

<code>$("#upload-btn").click(function(){    var formData = $("imglist").attr('name');    formData.append('img',fileData);    $.ajax({        type: "POST",        url: "{{ path('advsimghandle_') }}",        dataType:"json",        data:{            imageUpload: formData        },        success:function(msg){        }    })})</code>

请问我改怎么获取这个name的属性?还有文件预览都是预览到同样的一张图片,譬如说我选择两张图片,结构都是预览到第二张,第一张好像是循环的时候被过滤掉了,是不是该判断还是?,我改怎么改这个代码才能分别预览到照片。另外ajax也有问题的,通过firebug查看是没有post东西到后台的。多谢了。


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:javascript – 多图片上传预览和ajax发送的问题

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址