AppCan做的图片上传代码
存在AppCan里的网页 index.html
<!DOCTYPE html> <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="css/fonts/font-awesome.min.css"> <link rel="stylesheet" href="css/ui-box.css"> <link rel="stylesheet" href="css/ui-base.css"> <link rel="stylesheet" href="css/ui-color.css"> <link rel="stylesheet" href="css/appcan.icon.css"> <link rel="stylesheet" href="css/appcan.control.css"> </head> <body class="um-vp" ontouchstart> <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0"> <div id="content" class="ub-f1 tx-l "> </div> <!--content结束--> </div> <script src="js/appcan.js"></script> <script src="js/appcan.control.js"></script> </body> <script> appcan.ready(function() { appcan.frame.open("content", "http://benchmark.shinho.net.cn/XHR/index.html", 0, 0); window.onorientationchange = window.onresize = function() { appcan.frame.resize("content", 0, 0); } }); function Goto(popName){ appcan.openWinWithUrl(popName,'pages/upload.html'); } function Save(val){ appcan.request.ajax({ type : 'POST', url : 'http://benchmark.shinho.net.cn/webapp/picturetest.aspx', //添加参数 data : { file:{path:val} }, //期望的返回类型 dataType : 'html', headers:{ MIME: 'multipart/form-data' }, success : function(data) { //获取内容 alert("上传成功！"); appcan.window.evaluatePopoverScript({ name:'', popName:'content', scriptContent:"SendUrl('"+data+"')" }); }, error : function(xhr, type) { alert('上传错误！'); } }) } </script> </html>
云端页面的程序
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="欣和人" /> <meta name="description" content="欣和人"> <title>欣和人</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <link href="css/reset_v4.css" type="text/css" rel="stylesheet" media="all" /> <link rel="stylesheet" type="text/css" href="css/wap_v2.css" media="all"> <style type="text/css"> .imglist{width:58%;margin:0 auto;} </style> </head> <body> <ul class="mlist"> <a href="message.htm">我的消息</a> <a href="messub.htm">我的投稿</a> </ul> <div class="nav"> <div class="page-header"> <a href="index.html" target="_self" title=""><img src="images/topprev.png" /></a> <a href="index.html" target="_self" title=""><img src="images/logo.png" /></a> <a target="_self" title="" class="headerright list"><img src="images/toplist.png"/><span>2</span></a> <a href="search.htm" target="_self" title="" class="headerright"><img src="images/topsearch.png"/></a> <a href="submission.htm" target="_self" title="" class="headerright"><img src="images/topedit.png"/></a> <div class="clear"></div> </div> <div class="nav_box"> <div class="nav_bor">查看其他期</div> <div class="nav_d" id="wrapper1"> <ul class="nav_u"> </ul> </div> <div class="sab arr" ><img src="images/down.png" /></div> <ul class="nav_u_down"> </ul> </div> </div> <div class="wrapper submission"> <div class="title"> <input id="title" type="text" placeholder="请填入稿件标题"> <div class="clear"></div> </div> <div class="contain"> <textarea id="content" placeholder="请填写图文正文......"></textarea> <div class="clear"></div> </div> <div class="imglist"> </div> <button class="subbut" onClick="upload();">上传图片</button> <div class="clear"></div> </div> <button class="subfixbut" onclick="tg();">提交</button> </body> </html> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <script src="js/controllers.js"></script> <script type="text/javascript"> (function ($) { $.getUrlParam = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } })(jQuery); $(document).ready(function(){ $(".page-header .list").click(function(){ $(".mlist").slideToggle("slow"); }); $.ajax({ type: "GET", url: "http://www.minierp.net.cn:8005/api/Journal/GetAllJournals", success: function (data) { var obj = eval('(' + data + ')'); //$(".nav_u").append("<li><a href='index.html?id=" + obj[0].journal_id + "'>" + obj[0].journal.substring(2, 9) + "期" + "</a></li>"); //for (i = 1; i < 6; i++) { for (i = obj.length - 1; i >= obj.length - 6 || i >= 0; i--) { $(".nav_u").append("<li><a href='index.html?id=" + obj[i].journal_id + "'>" + obj[i].journal.substring(2, 9) + "期" + "</a></li>"); } for (i = 6; i <= obj.length; i++) { $(".nav_u_down").append("<li><a href='index.html?id=" + obj[i].journal_id + "'>" + obj[i].journal.substring(2, 9) + "期" + "</a></li>"); } } }); }); $(function(){ function dropNav(){ var $btn=$(".arr"), $Mn=$(".nav_u_down"), $true=true; $Mn.fadeOut(); $btn.bind("click",function (e){ if($true){ $Mn.fadeIn(); $(".nav_box").addClass("nav_box1"); $true=false; }else{ $Mn.fadeOut(); $(".nav_box").removeClass("nav_box1"); $true=true; } e.preventDefault(); return false; }); $Mn.bind("click" ,function (e){ $Mn.fadeIn(); $(".nav_box").addClass("nav_box1"); $true=false; e.stopPropagation(); }); $(document).bind("click" ,function (){ $Mn.fadeOut(); $(".nav_box").removeClass("nav_box1"); $true=true; }); }; $(function (){ dropNav(); }); }) function tg() { var files = ""; var s = $(".imglist img"); for(i=0;i<s.length;i++){ files += $(s).attr("src")+";"; } $.ajax({ type: "POST", url: "http://www.minierp.net.cn:8005/api/Article/PostAritcle", data: { pTitle: $("#title").val(), pContent: $("#content").val(), files: files }, success: function (result) { if (result == 'OK') { alert("投稿成功！"); window.location.href = "submission.htm"; } else { alert("投稿失败！"); } } }); } $(function () { if ($.getUrlParam('id') != "") { $.ajax({ type: "POST", url: "http://www.minierp.net.cn:8005/api/Article/GetArticleEdit", data: { articleid: $.getUrlParam('id') }, success: function (data) { var obj = eval('(' + data + ')'); $("#title").val(obj[0].article_title); $("#content").val(obj[0].article_content); del($.getUrlParam('id')); } }) } }) function del(id) { $.ajax({ type: "DELETE", url: "http://www.minierp.net.cn:8005/api/Article/DeleteArticle", data: { articleid: id } }) } function upload(){ //uexWindow.evaluateScript("", 0, "Goto('pics');"); uexImageBrowser.cbPick = cbPick ; uexImageBrowser.pick(); } function SendUrl(url){ var h = $(".imglist").html(); h += "<img src='"+url+"' alt='' style='max-width:60px;max-height:60px;margin-right:15px;'/>"; $(".imglist").html(h); } function cbPick(opId,dataType,p) { uexWindow.evaluateScript("", 0, "Save('"+p+"');"); } </script>