Base64和AjaxUpload上传文件代码实例

Base64和AjaxUpload上传文件代码实例 Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式，它们都可以实现文件上传到服务器端，但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式，它将文件转换为Base64字符串，然后将其提交到服务器端。这种方式的优点是，不需要使用form表单，也不需要设置enctype类型，上传文件的速度也相对较快。但是，Base64上传文件也存在一些缺陷，例如上传文件的大小有限制，不能上传大文件类型。 AjaxUpload上传文件是一种基于Ajax技术的上传方式，它可以实现文件的实时上传，提高用户体验。这种方式的优点是，上传文件的速度相对较快，且可以实时显示上传进度。但是，AjaxUpload上传文件也存在一些缺陷，例如需要使用form表单，需要设置enctype类型，上传文件的大小也有限制。 下面是一个使用Base64上传文件的代码示例： HTML代码： ``` <input type="file" id="file"> <input type="hidden" id="base64"> <button type="button" value="上传" onclick="upload()"> <div></div> ``` JavaScript代码： ``` $("#file").change(function(){ var v = $(this).val(); var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function(e){ console.log(e.target.result); var item=e.target.result; $("#base64").val(item); }; }); function upload(){ var fileData = $("#base64").val(); $.ajax({ type : "POST", url : "/upload/Base64/uploadFile", dataType : "json", data : {"fileData" : fileData}, success : function(result) { $("div").append("<img src="+data+">"); alert("上传成功!"); } }); } ``` 在这个示例中，我们首先使用FileReader对象将文件转换为Base64字符串，然后将其提交到服务器端。服务器端可以直接保存Base64字符串，然后在显示图片时，直接将字符串返回到前台，使用img标签的src属性指向返回的数据来显示图片。 在这个示例中，我们使用了两种方式来获得用户选择的文件，第一种方式是使用$("#file").change()方法，第二种方式是使用$("[type=file]").change()方法。两种方式都可以实现文件上传，但第二种方式更加灵活，能够处理多个文件上传的情况。 Base64和AjaxUpload上传文件代码实例都是常用的文件上传方式，每种方式都有其优缺点，选择哪种方式取决于具体的应用场景和需求。