file上传文件

最新推荐文章于 2024-03-07 01:45:02 发布

原创最新推荐文章于 2024-03-07 01:45:02 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #文件上传 #file

个人笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的图片上传功能。通过一个简单的表单进行文件选择，并利用Ajax进行异步提交到服务器端。文章详细展示了如何监听文件选择事件、组织请求参数以及处理服务器响应的过程。

//html

<form method="post" enctype="multipart/form-data" id="material_form">
     <div class="shangzhuan">
	<div class="input_file">
	    <input type="file" name="fileInp" id="fileInp"/>
	    <a href="#">本地上传</a>
	</div>
    </div>
</form>

	 //上传图片  js
		 var input = document.getElementById("fileInp");
		    input.addEventListener('change',readFile,false);
		    
		    function readFile() {

		        var data = $('#material_form').serialize();
		        $('#material_form').ajaxSubmit({
		            url : "/weixin/material/upload",
		            data : {'materialType': 'image'},
		            type : 'POST',
		            cache : false,
		            async : false,
		            dataType : 'json',
		            success:function(data) {
		                if (data.isError === "1") {
		                    layer.alert("上传素材失败", {icon : 2, time : 5000});
		                }else{
							layer.msg("上传素材成功", {
								time: 3000 //2秒关闭（如果不配置，默认是3秒）
							});
							selectList(1);				
		                }                
		            },
		            error : function(XmlHttpRequest, textStatus, errorThrown) {
		                layer.alert('操作失败，请刷新页面后重试！', {icon : 2, time : 5000});
		            }
		        });
		    }