1
回答
问一个python django + ajax 图片上传的问题
终于搞明白,存储TCO原来是这样算的>>>   

我是想实现这样的功能:

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

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

 

models.py

class ToImg(models.Model):
	img = models.ImageField(upload_to='uploads/%Y/%m', verbose_name='用户上传图片')
	
	def __unicode__(/question/2628079_2262568/self):
		return self.img.name
		
	def get_absolute_url(/question/2628079_2262568/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 + " ]")
                        });

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

顶部