zoukankan      html  css  js  c++  java
  • 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-60px;max-height:60px;margin-right:15px;'/>";
            $(".imglist").html(h);
        }
        
        function cbPick(opId,dataType,p) {
            uexWindow.evaluateScript("", 0, "Save('"+p+"');");
        }
    </script>
  • 相关阅读:
    Java应用中的SQL依赖注入攻击和防范
    强大的 Jquery图表绘制插件 —— jqPlot
    jqPlot的Option配置对象详解
    也谈Java值传递到底传递了什么?
    Use Case 中 include 与 extend 的区别
    STAR UML 简述1
    在Hibernate中使用 HibernateTemplate的三种方法
    jquery ui tabs详解(中文)
    高性能网页开发规则
    如何绘制 UML 活动图(Activity Diagram)
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/5190357.html
Copyright © 2011-2022 走看看