New FileReader上传图片
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }
$("#imgInp").change(function(){ var that=this; readURL(that); });
<a href="javascript:;" class="b-upload"> <span class="sub">上传名片</span> <input type='file' name='paymentQrCode' id="imgInp" /> </a>
.b-upload{ height: 40px; line-height: 40px; font-size: 18px; width: 80%; position: relative; cursor: pointer; color: #fff; background: #008ce6; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; text-align: center; display: inline-block; margin-top: 20px; } .b-upload input{ position: absolute; font-size: 160px; right: 0; top: 0; }
上传方法 formData.append
<input type="file" id="iconfile" style="display:none;" /> <label class="btn btn-primary" style="padding: 4px 20px; margin-bottom: 10px;" id="upIcon">上传</label>
$("#upIcon").click(function(){ iconfile.click(); }); $("#iconfile").on("change", function(){ var file = this.files[0]; //选择上传的文件 if (file==null){ return false; } //判断类型是不是图片 if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } /* if () { } */ var formData = new FormData(); formData.append('file', file, file.name); formData.append('gameId', $(this).attr('data-gameId')); $.ajax({ url: 'url' , type: 'POST', data: formData, dataType: 'JSON', async: false, cache: false, contentType: false, //必须设置,缺少上传不成功 processData: false, //必须设置,不对数据做处理 success: function (data) { /* $('#iconUrl').val(data.data.value); */ if(data.status==1){ alert('上传成功'); table.api().ajax.reload(); }else{ alert(data.msg) } }, error: function (err) { console.log(err); } }); });
你要觉得这篇文章比较好,记得点推荐!