当前位置: 代码迷 >> Java Web开发 >> ajax表单下传
  详细解决方案

ajax表单下传

热度:9249   发布时间:2013-02-25 21:09:08.0
ajax表单上传
一句话: <form> 用户名字: <input type="text" > 上传文件 <input type="type" ></form> 这个表单用ajax提交。 文件上传成功。并 后台可以得到 用户名;请高人指点

------解决方案--------------------------------------------------------
Java code
<form action../save.action" method="post" id="companyPhotoForm" name="form">    名称:    <input type="text"  id="title"   name="title"  value=""/>     <span id='titleDiv'><font class="tjbmfont"></font></span>   文件上传:<input id="upload" name="upload" type="file" value=""class="addGgczConterinput"  onchange="ajaxFileUpload()"/>    <div id="fileList" class='tjbmDiv01'>    </div>    <script type="text/javascript">        var preview = "false";        function ajaxFileUpload() {            if ($("#upload").val() == "") {                return;            }            var fileValue = $("#upload").val();            var fileType = fileValue.substr(fileValue.lastIndexOf(".") + 1).toLowerCase();            var type = "jpg,bmp,gif,png,jpeg";            if (type != "") {                if (type.indexOf(fileType) == -1) {                    alert("此类型文件禁止上传!");                    return;                }            }            $.ajaxFileUpload({ url:'/doUploadAJAX.action',                secureuri:false,                fileElementId:'upload',                dataType: 'json',                success: function (data, status) {                    $("#uploadDiv").hide();                    $("#fileList").show();                    if (preview == "true") {                        $("#fileList").append("<div><img src='"+data.resourceServerUrl+ data.uploadedResourceInsrance.filePathName + "' title='" + data.uploadFileName + "' width='100px' height='100px'></div>");                    }                    if($("#fileId").length>0){                        $("#fileId").val(data.uploadedResourceInsrance.id);                    }                    if($("#fileName").length>0){                        $("#fileName").val(data.uploadFileName);                    }                    if($("#fileSize").length>0){                        $("#fileSize").val(data.uploadFileSize);                    }                    if($("#filePath").length>0){                        $("#filePath").val(data.uploadedResourceInsrance.filePathName);                    }                },                error: function (data, status, e) {                    alert(status);                }            });            return false;        }        function remove(resourceId) {            if (confirm("您确定要删除该数据么?")) {                $.post('/removeFileAJAX.action', {"resourceId":resourceId}, function(data) {                    $("#uploadDiv").show();                    $("#fileList").hide();                   if($("#fileId").length>0){                        $("#fileId").val("");                    }                    if($("#fileName").length>0){                        $("#fileName").val("");                    }                    if($("#fileSize").length>0){                        $("#fileSize").val("0");                    }                    if($("#filePath").length>0){                        $("#filePath").val("");                    }                });            }        }    </script></form>       <a href="javascript:void(0);" onclick="companyPhotoSubmit()">提&nbsp;交</a><script>    function companyPhotoSubmit() {            var filePath = document.getElementById("filePath").value;        if (filePath == null || filePath == "") {            return alert("请选择要上传文件");                    }else{                              document.getElementById("companyPhotoForm").submit();                          }          }        </script>
  相关解决方案