javascript - 多图片上传预览和ajax发送的问题-php教程-PHP中文网

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

php中文网

发布： 2016-06-06 20:08:54

原创

1086人浏览过

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

<form id="fileUpload"  enctype="multipart/form-data">
    <div class="upload-layer">
        <ul class="upload-ul">
            <li>
                <input id="imglist" type="file" name="imageUpload[]" multiple="multiple"accept="image/*"/>
                <label for="imglist" id="img-label">选择文件
                </label>
            </li>
        </ul>
        <div class="upload-sub">
            <input type="button" id="upload-btn" value="提交">
        </div>
    </div>
</form>

登录后复制

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

$(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);
        }
    });
})

登录后复制

这是ajax发送部分代码：

$("#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){

        }
    })
})

登录后复制

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

回复内容：

立即学习“Java免费学习笔记（深入）”；

MartCnEnterPrise企业版

除了有一半电子商务的全部基本功能外，还增加了“模版自由更换”“程序在线自动更新升级”“分布式搜索”等特色功能主要功能： ·网站的基本信息设置，部分数据以XML方式同服务器发生交互。 ·可自行关闭和开启网站，方便维护，可自定维护时显示的代码。 ·可自定义站点的关键字和描述，方便搜索引擎找到您的网站。 ·可自定义商品图片、新闻图片的上传目录和预览图片的大小。 ·提供自己设置网站的邮件发送服务器SM

查看详情

<form id="fileUpload"  enctype="multipart/form-data">
    <div class="upload-layer">
        <ul class="upload-ul">
            <li>
                <input id="imglist" type="file" name="imageUpload[]" multiple="multiple"accept="image/*"/>
                <label for="imglist" id="img-label">选择文件
                </label>
            </li>
        </ul>
        <div class="upload-sub">
            <input type="button" id="upload-btn" value="提交">
        </div>
    </div>
</form>

登录后复制

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

$(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);
        }
    });
})

登录后复制

这是ajax发送部分代码：

$("#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){

        }
    })
})

登录后复制