HTML语言如下,隐藏文件文本框,写一个button按钮,通过点击该按钮来弹出选择图片对话框:
<input type="file" id="uploadFile" name="uploadFile" style="display:none;" accept="image/*" onchange="uploadImage()"/> <input type="button" name="upload" value="+ 浏览上传" onclick="uploadFile.click()"> <input type="hidden" name="images" id="images" value="" />
JS语言如下,主要用ajaxfileupload.js来传送图片文件信息到后端给PHP处理,然后接收PHP返回的信息,如果上传成功可以显示图片:
<script src="{MODULE_URL}template/mobile/js/ajaxfileupload.js"></script> <script type="text/javascript"> function uploadImage(){ $.ajaxFileUpload({ url:'{php echo $this->createMobileUrl("AjaxUploadImage");}', secureuri:false, fileElementId:'uploadFile', dataType: 'json', success: function (data, status){ if(data.success == true){ $("#newImageSrc").attr("src", data.path); //显示图片 $("#images").val(data.path);//设置图片路径 }else{ alert(data.message); } }, error: function(data, status, e) { alert("网络错误,请稍候重试"); } }); return false; } </script>
PHP后端主要是执行图片上传,然后返回json格式的信息给前端。
下载地址:http://www.haoshu888.com/download/js/ajaxfileupload.zip