图片上传页面备份

@{
    ViewBag.Title = "上传";
}

@section Scripts{

<link href="@Url.Content("~/Content/widgets/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/widgets/uploadify/jquery.uploadify.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/widgets/jcrop/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/widgets/jcrop/jquery.Jcrop.js")" type="text/javascript"></script>

     <style type="text/css">
 /* 上传按钮 */
         #uploadifyUploader
 {
             margin-top: 235px;
 }
 /* 加载条 */
         .uploadifyQueueItem
 {
             margin: 0 auto;
 }
         #img-up
 {
             width: 700px;
             height: 500px;
             background-color: #e8f0f6;
             text-align: center;
 }
         #img-prev-container
 {
             width: 200px;
             height: 200px;
             overflow: hidden;
             clear: both;
 }
         #img-crop
 {
             display: none;
 }
 </style>

 @*<script type="text/javascript">
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'swf': '@Url.Content("~/Content/widgets/uploadify/uploadify.swf")',
                'script': '@Url.Action("Upload","Gallary")',
                'cancelImg': '@Url.Content("~/Content/widgets/uploadify/uploadify-cancel.png")',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true,
                'onSelect': function ( fileObj) {
                    alert("文件名:" + fileObj.name + "\r\n" +
                          "文件大小:" + fileObj.size + "\r\n" +
                          "文件类型:" + fileObj.type
                    );
                },
                buttonText   :"选择图片" 

            });
        });  
</script>*@

<script type="text/javascript">
    $(function () {
        var jcrop_api, boundx, boundy;

        function updateCoords(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                /* 商必须与img-preview宽高一致 */
                var rx = 200 / c.w;
                var ry = 200 / c.h;

                $('#img-preview').css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };

        $("#uploadify").uploadify({
            'swf': '@Url.Content("~/Content/widgets/uploadify/uploadify.swf")',
            'uploader': '@Url.Action("Upload","Gallary")',
            'cancelImg': '@Url.Content("~/Content/widgets/uploadify/uploadify-cancel.png")',
            'folder': 'Images',
            'queueID': 'fileQueue',
            'buttonText': 'upload image',
            'queueSizeLimit': 1,
            'multi': false,
            'fileDesc': 'png,jpg,gif',
            'fileExt': '*.png;*.jpg;*.gif',
            'sizeLimit': '819200',
            'onComplete': function (event, queueID, fileObj, response, data) {
                var result = eval('(' + response + ')');
                if ('0' == result.id) {
                    $('#img-up').remove();
                    $('#img-crop').css("display", "block");
                    /* 绑定图片名称 */
                    var iname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
                    $('#img').val(iname);
                    /* 加载原始图片 */
                    $('#img-preview,#img-uploadify').attr("src", result.mess);
                    /* 加载剪裁插件 */
                    $('#img-uploadify').Jcrop({
                        onChange: updatePreview,
                        onSelect: updatePreview,
                        aspectRatio: 1,
                        onSelect: updateCoords,
                        setSelect: [0, 0, 200, 200]
                    }, function () {
                        var bounds = this.getBounds();
                        boundx = bounds[0];
                        boundy = bounds[1];
                        jcrop_api = this;
                    });
                } else if ('1' == result.id) {
                    /* 异常信息提示 */
                    alert(result.mess)
                }
            }
        });
    });
 </script>
}
    <div id="img-up">
        <input type="file" id="uploadify" name="uploadify" />
        <div id="fileQueue">
        </div>
    </div>
    <div id="img-crop">
        <div id="img-prev-container">
            <img id="img-preview" />
        </div>
        <img id="img-uploadify" />
        <form action="/Crop/tryCrop" method="post">
        <input type="hidden" name="x" id="x" />
        <input type="hidden" name="y" id="y" />
        <input type="hidden" name="w" id="w" />
        <input type="hidden" name="h" id="h" />
        <input type="hidden" name="img" id="img" />
        <input type="submit" value="剪裁" />
        </form>
    </div>

知识共享许可协议
《图片上传页面备份》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     151.02ms