新：问一个python django + ajax 图片上传的问题

Question

我是想实现这样的功能：

在发贴子的时候，如果有图片，就点击图片，图片会自动上传并以这样的 <img src='图片地址' /> 这样的方式扎入编辑器里。下面是代码。

遇到的问题在后面会有说明

models.py

class ToImg(models.Model):
    img = models.ImageField(upload_to='uploads/%Y/%m', verbose_name='用户上传图片')
    
    def __unicode__(self):
        return self.img.name
        
    def get_absolute_url(self):
        return self.img.url

views.py

@csrf_exempt        
def upload_ajax(request):
    ret = {'dataa':None,'status':False,'error':None}
    if request.method == 'POST':
        file_img = request.FILES['img']
        is_img = file_img.name.split('.')[-1]
        if is_img not in ('jpeg', 'jpg', 'png', 'gif', 'tmp'):
            ret['dataa'] = '友情提示：不充许上传的类型,你的上传不成功,请更换图片上传 '
            ret['status'] = False
            ret['errot'] = True
            print 'no img'
            return HttpResponse(json.dumps(ret), content_type="application/json")
        form = UpimgForm(request.POST, request.FILES)
        if form.is_valid():
            try:
                ret['status'] = True
                abc = form.save() #会多保存一条记录？
                ret['dataa'] = 'http://127.0.0.1:8000' + abc.img.url
            
            except Exception as e:
                ret['error'] = str(e)
            return HttpResponse(json.dumps(ret), content_type="application/json")
    else:
        form = UpimgForm()
    return render(request, 'bbs/upload_ajax.html', context={'form':form})

url.py 代码

url(r'^u_a/$', upload_ajax, name = 'u_a'),

js代码 文件：

<script>
    // ajax + jQuery上传
    function UploadFile2() {
        $('#id_img').find('img').remove();
        var fileobj = $("#id_img")[0].files[0];
        var form = new FormData();
        form.append('img',fileobj);
        $.ajax({
            type:'POST',
            url:'{% url 'bbs:u_a' %}',
            data:form,
            dataType:'json',
            processData:false,  // 告诉jquery不转换数据
            contentType:false,  // 告诉jquery不设置内容格式
            success:function(data, status){
                    var new_img = $('<img class = "imgabc" src = "' + data.dataa + '" />');
                    $('#container').append(new_img);
                    $('#cg123').append('上传成功了!');
                    $('#id_body').append("[ " + data.dataa + " ]");
                    $('#id_body').append($('<img class = "imgabc" src = "' + data.dataa + '" />'));
                    $('img').click(function(){
                        $(this).hide();
                        $('#cg123').hide(); //上传成功隐藏的代码提示!
                        var nm = $('[' + '<img src = "' + data.dataa + '">' + ']');
                        $('#id_body').append(nm);
                        });
                },
            error: function (err) {
                    console.log(err)
                    }
        })
    }
</script>

html文件：

<form action="{% url 'bbs:u_a' %}" enctype="multipart/form-data" method="POST">
图片上传: <input type="file" name="img" id="id_img" onchange="UploadFile2();" />

</form>

上面的代码。执行时遇到这样的问题：

直接http://这样的图片地址可以加进去。

但是<img src= '' /> 这样的地址就不显示。但是在查看元素里面有。

发布贴子后但是<img scr='' /> 这代码也没有在贴子里显示出来。只有http://xxx.jpg 这样的地址。

如果编辑器里有其它文字的话。那么上面的js代码就不执行了。什么也插不进去了。点击图片什么也插不进去了！

不知怎么能达到图片会自动上传并以这样的 <img src='图片地址' /> 这样的方式扎入编辑器里功能。发布贴子后，成功发布显示出来？

还有一个问题。
下面代码不太明白：

$('img').click(function(){
                        $(this).hide();
                        $('#cg123').hide(); 
                        $('#id_body').append("[" + data.dataa + " ]")
                        });

我想点击每一个图片后，在编辑器里面再次插入这一个图片的地址，但是上面代码。好像上传多个图片后。点一个图片会上传多个图片。
怎么样改成。点击哪个图片。那个图片的地址插入到编辑器？

Answer 1

（怎么好像记得答过这题……）

Py不熟，就说说稍微认识点的部分吧：

1. 既然有文本有图片，建议就不要用<textarea>了，因为它是多行文本编辑器，往里塞图片当然就没反应咯。看你的需求貌似还比较简单，没有文本格式之类的，所以可以试试写成

   <div contenteditable="true"></div>

   这样试试，不过，如果有复杂需求的话，还是建议上个富文本编辑器。

2. 关于后边那段js，由于前边的选择器是$('img')，所以每次ajax成功后都会给页面中的所有img标签都注册个事件回调，比如你上传了5张图片，那么第一张图片每次触发click就是5次（因为注册了5遍），第二张图片会触发4次，以此类推……

3. 放代码：

function UploadFile2() {
    var fileobj = $("#id_img")[0].files[0];
    var form = new FormData();
    form.append('img',fileobj);
    $.ajax({
        type:'POST',
        url:'u_a',
        data:form,
        dataType:'json',
        processData:false,  // 告诉jquery不转换数据
        contentType:false  // 告诉jquery不设置内容格式
    }).done(function(data){
        $('<img>', {
            'class': 'imgabc', // jQ的包装语法，把标签写前边、属性写后边，避免拼大段的字符串非常容易写乱掉，另外还能直接写事件回调。注意这里的class要加对引号，因为是系统保留字
            src: data.dataa
            click: function(){
                $('#cg123').hide(); //上传成功隐藏的代码提示!
                $(this).appendTo('#id_body');
            }
        }).appendTo('#container'); // 链式写法，构造好了直接插入，无需缓存
        $('#cg123').text('上传成功了!');
        $('<p>').text("[ " + data.dataa + " ]").appendTo('#id_body');
    }).fail(function(err){
        console.error(err);
    })
}