0825自我总结
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<img src="空图片连接" width="80" height="80" style="margin-left: 20px" id="id_img">
<input type="file" name="file" id="uploadForm">
<button id="btnUpload">up</button>
<script>
//当该控件发生变化,响应该事件
$("#uploadForm").change(function () {
//alert(1)
//取到文件对象
var file = $("#uploadForm")[0].files[0]
//放到img控件上,借助于filereader 中间的东西,文件阅读器
//生成一个文件阅读器对象赋值给filereader
var filereader = new FileReader()
//把文件读到filereader对象中
//读文件需要时间,需要文件读完再去操作img
//如果没这一步操作下面不一定变化
filereader.readAsDataURL(file)
filereader.onload = function () {
$("#id_img").attr('src',filereader.result)
}
})
</script>
2.对于后台传输与接收
1.传输
<script>
$("#btnUpload").on("click",function () {
var formData = new FormData();
//获取要上传多个文件
//let file = $("#uploadForm");
//for (let w = 0; w < file.length; w++) {
// formData.append("files[]",file[w]);
//}
formData.append('img',$("#uploadForm")[0].files[0]); //添加图片信息的参数
formData.append('sizeid',123); //添加其他参数
$.ajax({
url: '/register/',type: 'post',secureuri: false,//是否启用安全提交,默认为false。
cache: false,//上传文件不需要缓存
data: formData,processData: false,// 告诉jQuery不要去处理发送的数据
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
alert(" 上传成功");
},error: function (data) {
alert("上传失败");
}
})
})
</script>
2.接收
#核心代码
img=request.FILES.get('img')
#如果设置中没有设置默认存储在avatar文件下
#对于存储位置设置需要在setting中设置
#加这两句,以后再上传的图片,都放在media文件夹下
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR,"media")
3.路由
#开路由,直接通过URL能访问源码
from django.views,static import serve
from django.conf import settings #要载入他的配置文件
urlpatterns = [
url(r'^media/(?P<path>.*)',serve,{'document_root':'文件的根路径'}),]
#他会进行拼接,根据传的path拼接再文件的根路径后,然后找到文件
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|