js上传、文件/图片及其提交方式
用formData对象承载表单
- files是文件选取控件的属性,存储的是文件选取控件选取的文件对象,类型是一个数组,下方显示为
fileM.files[0];
- 通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾。
formData.append('file', fileObj);
第一个参数为添加的表单数据name为file,第二个参数为数据对象。<from action="" enctype="multipart/form-data" method="post"> <a> <span>修改头像</span> <input type="file" id="fileUp" accept="image/png,image/jpeg"> </a> </from> var fileM=document.querySelector("#fileUp"); $("#fileUp").on("change",function() { //获取文件对象,files是文件选取控件的属性,存储的是文件选取控件选取的文件对象,类型是一个数组 var fileObj = fileM.files[0]; //创建formdata对象,formData用来存储表单的数据,表单数据时以键值对形式存储的。 var formData = new FormData(); formData.append('file', fileObj); $.ajax({ url: "自己的后台的Url", type: "post", dataType: "json", data: formData, async: false, cache: false, contentType: false, processData: false, success: function (json_data) { alert("恭喜你!上传成功"); }, }); });
jQuery.form.js
jquery.form.js 让表单提交更优雅。可以页面不刷新提交表单,比jQuery的ajax提交要功能强大。
下载插件至官网
- 引入
<script src="/src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/src/jquery.form.js"></script>
- 使用
//html部分
<input type="file" class="file" name="filename">
</form>
<button class="btn btn-primary" onclick="subimtBtn();">提交</button>
JS部分,其中options对象:
target: ‘#output’, //把服务器返回的内容放入id为output的元素中
beforeSubmit: showRequest, //提交前的回调函数
url: url, //默认是form的action, 如果申明,则会覆盖
clearForm: true, //成功提交后,清除所有表单元素的值
resetForm: true, //成功提交后,重置所有表单元素的值
timeout: 3000, //限制请求的时间,当请求大于3秒后,跳出请求
//js部分
function subimtBtn() {
var form = $("form[name=fileForm]");
var options = {
url:'/upload', //上传文件的路径
type:'post',
success:function(data){
console.log(data);
//异步上传成功之后的操作
}
};
form.ajaxSubmit(options);
}
附:图片格式转换
如果要实现预览,这个最简单,直接将下面得到的reader.result赋值给一个img标签就可显示,后台传的图片数据也直接把reader.result储存起来发过去就可以。
//将选择的图片转换为base64编码格式
$('input[type=file]').on{'change',function(){
var reader=new FileReader();
reader.function(e){
console.log( reader.result); //或者 e.target.result都是一样的,都是base64码
}
reader.readAsDataURL(this.files[0])
//filses就是input[type=file]文件列表,files[0]就是第一个文件,这里就是将选择的第一个图片文件转化为base64的码
}
/**
* 将以base64的图片url数据转换为Blob文件格式
* @param urlData 用url方式表示的base64图片
*/
function convertBase64UrlToBlob(urlData) {
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: 'image/png'
});
}