javascript - 怎么把图片上传并且传到后台
本文介绍了javascript - 怎么把图片上传并且传到后台的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
上传的对不对啊，这是我已经做好的 但怎么把他传给后台啊。
html
<!--主体-->
<div class="personal">
<div class="personal_l">
<div class="personal_l_ul">
<span>账号管理</span>
<ul>
<li>
<a href="per_information.html">基本信息</a>
</li>
<li>
<a href="modify_data.html">资料修改</a>
</li>
<li>
<a href="modify_password.html">密码修改</a>
</li>
<li>
<a href="bind_mobile.html">绑定手机</a>
</li>
</ul>
</div>
<div class="personal_l_ul">
<span>信息管理</span>
<ul>
<li >
<a href="my_news.html">我的消息</a>
</li>
<li>
<a href="my_collection.html">我的收藏</a>
</li>
<li>
<a href="my_download.html">我的下载</a>
</li>
</ul>
</div>
<div class="personal_l_ul">
<span>协会会员</span>
<ul>
<li class="juxing">
<a>入会申请</a>
</li>
</ul>
</div>
</div>
<div class="personal_r">
<form action="#" method="post" id="myform">
<p>
<label>公司名称</label>
<input type="text" id="" name="mingcheng" class="text" />
</p>
<p>
<label>公司类型</label>
<select name="lxing1" class="mem_seclect mem_seclect1">
<option value="">个人</option>
<option value="">国企</option>
<option value="">私企</option>
</select>
<select name="lxing2" class="mem_seclect mem_seclect2">
<option value="">股份</option>
<option value="">股份1</option>
<option value="">股份2</option>
</select>
</p>
<p>
<label>主营行业</label>
<input type="text" id="" name="hangye" class="text" />
</p>
<p>
<label>公司规模</label>
<select name="guimo" class="mem_seclect mem_seclect3">
<option value="">1-20人</option>
<option value="">20-40人</option>
<option value="">40-100人</option>
<option value="">100人以上</option>
<option value="">上市</option>
</select>
</p>
<p>
<label>注册资本</label>
<input type="text" id="" name="ziben" class="text1" />
<span>万</span>
</p>
<p>
<label>所在地区</label>
<select name="province" id="province" class="mem_seclect ">
<option value="">省份</option>
</select>
<select name="city" id="city" class="mem_seclect ">
<option value="">地级市</option>
</select>
<select name="districtAndCounty" id="districtAndCounty" class="mem_seclect ">
<option value="">市、县级市</option>
</select>
</p>
<p>
<label>公司地址</label>
<input type="text" id="" name="dizhi" class="text" />
</p>
<p>
<label>公司电话</label>
<input type="text" id="" name="phone" class="text" />
</p>
<p>
<label>公司传真</label>
<input type="text" id="" name="fax" class="text" />
</p>
<p>
<label>公司邮箱</label>
<input type="text" id="" name="email" class="text" />
</p>
<p class="upload">
<label>营业执照</label>
<input type="text" id="" name="" class="text" disabled="disabled" />
<span class="file">
[上传]
<input type="file" name="" id="" class="filepath"/>
</span>
<span class="yulan">[预览]</span>
<span class="close">[删除]</span>
</p>
<p style="width: 660px;">
<label>公司介绍</label>
<textarea name="introduce" clos="100" rows="5" warp="virtual" class="text2"></textarea>
</p>
<p>
<label></label>
<input type="submit" value="提交" id="zong_btn" />
</p>
</form>
</div>
</div>
<!--图片的位置-->
<div class="dd">
<div class="dd_h">
<div class="dd_close"></div>
</div>
<div id="dd_img">
</div>
</div>
<div class="Dmid" style="z-index: 998; position: absolute; width: 100%; height: 1496px; overflow: hidden; top: 0px; left: 0px; border: 0px; opacity: 0.5; background-color: rgb(238, 238, 238);"></div>
js
//获取图片预览function reads(fil) {
var reader = new FileReader();
reader.readAsDataURL(fil);// $("#dd_img span").hide();
reader.onload = function() {
document.getElementById("dd_img").innerHTML += "<img src='" + reader.result + "'>";
};
}
$(".filepath").on("change", function() {
$("#dd_img span").html(" ")
var fil = this.files;
for(var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
})
$(".yulan").click(function(){
$(".Dmid").css({display:"block"});
$(".dd").css({display:"block"});
var w=$("#dd_img img").width()
if(w<100){
}
var h=$("#dd_img img").height()+20;
if(h<=40){
h=40
}
$("#dd_img").css({height:h})
})
$(".close").click(function(){
temolte="<span>你还没有上传图片</span>"
$("#dd_img").html(temolte)
})
$(".dd_h").click(function(){
$(".Dmid").css({display:"none"});
$(".dd").css({display:"none"});
})
$("#myform").submit(function() {
// var data = $(this).serialize(); //序列化表单数据
var mingcheng = $("input[name='mingcheng']").val();
var lxing1 = $('.mem_seclect1 option:selected').html();
var lxing2 = $('.mem_seclect2 option:selected').html();
var hangye = $("input[name='hangye']").val();
var guimo = $('.mem_seclect3 option:selected').html();
var ziben = $("input[name='ziben']").val();
var province = $('#province option:selected').html();
var city = $('#city option:selected').html();
var districtAndCounty = $('#districtAndCounty option:selected').html();
var dizhi = $("input[name='dizhi']").val();
var phone = $("input[name='phone']").val();
var fax = $("input[name='fax']").val();
var email = $("input[name='email']").val();
var introduce = $(".text2").val();
console.log(introduce);
var data = {
"mingcheng": mingcheng,
"lxing1": lxing1,
"lxing2": lxing2,
"hangye": hangye,
"guimo": guimo,
"ziben": ziben,
"province": province,
"city": city,
"districtAndCounty": districtAndCounty,
"dizhi": diz
"phone": phone,
"fax": fax,
"email": email,
"introduce": introduce,
}
$.ajax({
type: "post",
url: "http://demo.helloweba.com/jsonp.php?callback=?",
data: data,
dataType: "json",
success: function(data) {
}
});
return false;
});
解决方案
你这个应该是 base64 的数据，通过ajax post 请求把 这个数据抛给后台就可以了
这篇关于javascript - 怎么把图片上传并且传到后台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
